当前位置:网站首页>Douban scoring applet Part-2
Douban scoring applet Part-2
2022-07-05 22:56:00 【MAOpasX】
List of articles
One 、 primary coverage
Movie theater hit horizontal scroll box and Star rating component ( Full marks 10 branch , Five stars , One two points )
Two 、 Implementation of scroll box
1、 analysis
Whether it's hot in cinemas or hot in Douban , The layout is the same , So we just need to realize the big box of cinema hot screening
The analysis chart is as follows :
2、 Homepage single item layout
stay index.wxml In file , Let's write first modelGroup( Model group )、modelTop( Top of the model )、modelTitle( Model Title )、more( To view more )、itemNavigator( A movie navigation map )
【 explain 】 stay navigator We can make more copies of things in , For better understanding
3、 Picture external link
Above src Import external links , You can choose any movie in Douban movie , Right click on the , Copy the picture address
4、 Home page layout
index.wxss chart 1:
index.wxss chart 2:
5、 Add sample
Let's copy four more examples , Five items in one line , Better understanding
6、 Minor modifications
After the scroll chart scrolls to the far right , We found that it is more out of alignment with the above view , This is because in the itemNavigator( Navigation map of each item ) Added margin-right:20rpx( The right side of each navigation box is empty 20rpx), We can only let the last item margin-right be equal to 0
【 explain 】
Adding so many items is definitely not pure copy and paste , Otherwise, a small project light wxml The document is hundreds of thousands of lines , We'll use it later wx:for The list of rendering , Now let's first understand this layout (〃‘▽’〃)
3、 ... and 、 Implementation of star component
1、 analysis
Now we still need the stars and scores under each item , Of course, write your own score at present text Just go , Then the stars should correspond to our score , Full marks 10 branch , A star ( Highlight stars )2 branch , Half a star ( Half bright stars )1 branch , No stars ( Grey stars )0 branch
【eg】 If it is 7.4 branch , Then there will be three stars and one and a half stars , A dim star ( All in all 5 star ), To solve this problem alone , We can customize it stars Component to solve the problem
2、 Create and use stars Components
You can refer to what I wrote before Douban scoring applet Part-1 , Here's just a little more about
【 Two 、 Realization 】 Medium 【2、 establish searchbar Components 】
stay index.json To be used in the file stars Components , After the index.wxml In file movieName( The movie name ) You can use it later
3、 Add star pictures
4、 Add component properties and usage
We are stars.js Add its attributes to the file ,type( type ) It's digital ,value( value ) Default 0, Then we can go to the homepage index.wxml Use... In the document ( Because in the homepage rate The attribute of scoring will involve our next question about stars )
stars.js chart 1:
index.wxml chart 2:
5、stars preliminary wxml file
First rateGroup( Scoring group ) Cover the big box , But I found that we can only insert these three pictures first , The number of times each piece appears cannot be changed according to the score
6、stars Components wxss file
7、 Solve the star problem
① We can go through wx:for The list of rendering , Let the picture repeat
eg:
score 7.2, Corresponding to a whole star ( Highlight stars ) Should have 3 individual , Then you can create an array , establish for loop , This array can store 1, 2 ,3 Three elements , Then corresponding in image Use in wx:for, Will render the image three times , So that the picture appears three times
Q:wx:for What is list rendering ?
A: You can check the official wechat documents The list of rendering , Simple usage can also be viewed as previous blogs Zero foundation wechat applet Day3
② stay stars Component's js Solve in the document
stay lifetimes( Life cycle ) In the field attached() Function
Q: Why is it lifetimes Write in , What is this? ?
A: You can check the official wechat documents Component lifecycle , You can write it down first , Just write in here
stars.js chart 1:
But wx:for Only the list can be rendered ( Array ), So we build the corresponding array , There are several elements in the array corresponding to several stars
stars.js chart 2:
Correspondingly, I will rewrite the corresponding wxml file
stars.wxml chart 3:
8、 Add and use rateNum
To enhance logic , We can create rateNum Variable (rateNum=rate There is ? And greater than 0? If so, keep one decimal point , Otherwise, assign a value “ No score ”)
stars.js chart 1
stars.wxml chart 2
9、 Update data
Next setData It is a template for data update 、 tricks , One birth and two ripening
setData Function to send data from the logical layer to the view layer ( asynchronous ), At the same time change the corresponding this.data Value ( Sync )
Four 、 design sketch
design sketch 1:
design sketch 2:
5、 ... and 、 ending
Here, only two groups of data are simply modified , But you will find that these data are actually dead , It's all written by us . Then you want live data , It's about API The interface , and wxml Documents should not be so cumbersome , Let's talk about it in our next article
If you have any questions , You are welcome to point out ~ ヾ(◍°∇°◍)ノ゙
边栏推荐
- Editor extensions in unity
- Distributed resource management and task scheduling framework yarn
- Vision Transformer (ViT)
- thinkphp5.1跨域问题解决
- Evolution of APK reinforcement technology, APK reinforcement technology and shortcomings
- The code generator has deoptimised the styling of xx/typescript.js as it exceeds the max of 500kb
- leecode-学习笔记
- How to create a thread
- Metaverse ape ape community was invited to attend the 2022 Guangdong Hong Kong Macao Great Bay metauniverse and Web3.0 theme summit to share the evolution of ape community civilization from technology
- Solve the problem of "no input file specified" when ThinkPHP starts
猜你喜欢
2022.02.13 - SX10-30. Home raiding II
如何快速理解复杂业务,系统思考问题?
我把开源项目alinesno-cloud-service关闭了
The method and principle of viewing the last modification time of the web page
谷歌地图案例
一文搞定class的微觀結構和指令
First, redis summarizes the installation types
openresty ngx_lua请求响应
Metasploit (MSF) uses MS17_ 010 (eternal blue) encoding:: undefined conversionerror problem
Common JVM tools and optimization strategies
随机推荐
请求二进制数据和base64格式数据的预览显示
Postman core function analysis - parameterization and test report
【无标题】
Metaverse ape received $3.5 million in seed round financing from negentropy capital
2022 Software Test Engineer salary increase strategy, how to reach 30K in three years
New 3D particle function in QT 6.3
【Note17】PECI(Platform Environment Control Interface)
Paddy serving v0.9.0 heavy release multi machine multi card distributed reasoning framework
513. Find the value in the lower left corner of the tree
基于STM32的ADC采样序列频谱分析
fibonacci search
Starting from 1.5, build a micro Service Framework -- log tracking traceid
关于MySQL的30条优化技巧,超实用
使用rewrite规则实现将所有到a域名的访问rewrite到b域名
SPSS analysis of employment problems of college graduates
Golang writes the opening chapter of selenium framework
2022 R2 mobile pressure vessel filling review simulation examination and R2 mobile pressure vessel filling examination questions
APK加固技术的演变,APK加固技术和不足之处
30 optimization skills about mysql, super practical
Simple and beautiful method of PPT color matching