豆瓣评分小程序Part-2

文章目录

一、主要内容
二、滚动框的实现
三、星星组件的实现
四、效果图
五、结尾

一、主要内容

影院热映横向滚动框 和 星星评分组件（满分10分，五颗星，一颗两分）

二、滚动框的实现

1、分析

不管是影院热映还是豆瓣热门，都是一样的布局，所以我们只要将影院热映这一大盒子实现即可
分析图如下：

2、首页单项布局

在index.wxml文件中，我们先写出modelGroup（模型组）、modelTop（模型的顶部）、modelTitle（模型标题）、more（查看更多）、itemNavigator（一项电影导航图）

【说明】在navigator中的东西我们可以多复制几份，为了更好理解

3、图片外部链接

上述src导入外部链接，可以在豆瓣电影中随便选取一部电影，右键点击，复制图片地址即可

4、首页布局

index.wxss图1：

index.wxss图2：

5、增加样例

我们多复制四个样例，一行五项，更好理解

6、小修改

在滚动图滚动到最右边后，我们发现和上面的查看更多是不对齐的，这是因为在itemNavigator（每一项的导航图）中加入了margin-right：20rpx（每一个导航盒子右边空出20rpx），我们可以只让最后一项的margin-right等于0

【说明】

添加这么多项肯定不纯粹的用复制粘贴呐，不然一个小项目光wxml文件就几百上千行了，后面我们会用到wx：for列表渲染，大家目前先了解这样布局(〃‘▽’〃)

三、星星组件的实现

1、分析

现在还差每一项下面的星星和评分，评分当然目前自己写个text就行，那么星星要对应的上咱的评分，满分10分，一颗星（高亮星星）2分，半颗星（半亮星星）1分，没星星（灰色星星）0分
【eg】如果是7.4分，那么要出现三颗星和一颗半星，一颗不亮的星星（总共加起来5颗），为了单独解决这个问题，我们可以自定义stars组件来解决问题

2、创建和使用stars组件

大家可以参考我之前写的豆瓣评分小程序Part-1 ，这里不过多讲述

【二、实现】中的【2、建立searchbar组件】

在index.json文件中要使用stars组件，之后在index.wxml文件中movieName（电影名）后面使用即可

3、加入星星图片

4、增加组件属性与使用

我们在stars.js文件中增加它的属性，type（类型）是数字型，value（值）默认0，那么我们就可以在首页index.wxml文件中使用（因为主页中rate评分这一属性会涉及到我们接下来关于星星的问题）
stars.js图1：

index.wxml图2：

5、stars初步wxml文件

先rateGroup（评分组）大盒子套起来，但是发现我们只能先把这三张图片插进去，并不能根据评分是多少让每一张出现的次数变化

6、stars组件wxss文件

7、解决星星问题

① 我们可以通过wx：for列表渲染，让图片重复出现
eg：
评分7.2，对应的一整颗星星（高亮星星）应该有3个，那么可以创建一个数组，建立for循环，这个数组里可以存放1， 2 ，3 三个元素，那么相应的在image里使用wx：for，就会渲染三次图片，从而让图片出现三次

Q：wx：for列表渲染是什么？

A：可以查看微信官方文档列表渲染，简单的用法也可以查看为之前的博客零基础微信小程序Day3

② 在stars组件的js文件中解决

在lifetimes（生命周期）字段中的attached（）函数中进行编写

Q：为什么在lifetimes中写，这是啥？

A：可以查看微信官方文档组件生命周期，可以先记下来，就在这里面写

stars.js图1:

可是wx：for只能渲染列表（数组），所以我们建立对应的数组，是几颗星对应数组里有几个元素

stars.js图2：

对应的咱就要改写相应的wxml文件
stars.wxml图3：

8、增加并使用rateNum

为了增强逻辑性，我们可以创建rateNum变量（rateNum=rate存在？并且大于0？如果是的那就保留一位小数点，否则就赋值“未评分”）

stars.js图1

stars.wxml图2

9、更新数据

接下来setData是一种数据更新的模板、套路，一回生二回熟

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

四、效果图

效果图1：

效果图2：

五、结尾

这里只简单修改了两组数据，但是大家会发现这些数据其实都是死的，都是我们人为编写的。那么想要活的数据，就要涉及到API接口了，而且wxml文件中也不该如此的繁冗，我们下一篇文章进行讲述

有任何问题的话，欢迎各位指出~ ヾ(◍°∇°◍)ﾉﾞ