一、主要内容
影院热映横向滚动框 和 星星评分组件（满分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文件中也不该如此的繁冗，我们下一篇文章进行讲述
有任何问题的话，欢迎各位指出~ ヾ(◍°∇°◍)ﾉﾞ