Douban scoring applet Part-2

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 ~ ヾ(◍°∇°◍)ﾉﾞ