前语
很多网站、APP等的评价体系都有按星级评分的功用，大部分是5个星级，依次代表1~5分。用户只需求在某个星星上点击一下就可完成打分，操作难度低，也能让商家快速得到反应。 对商家而言，得到用户反应非常重要，它能够直接向你反应产品的受众作用。而对用户而言，经过评论和评分能够直观地判定 App 的质量。众所周知，无论是买车、买电影票仍是下载 App，他人反应在用户购买决议中起着非同一般的作用。此外，假如某款产品评分达到了 4 星及以上的，更简单受到潜在用户的喜爱。
功用
1、点击星星能够进行1～5星评分
2、伴随星星评分展现不同的文字评价
星星式评分
准备工作 右键点击以下图片并保存至本地。
第一步：摆组件
根据功用展现，咱们发现五颗星星依次横向排列，每颗星星都有点亮和未点亮两种情况。 为了完成星星的横向排布，能够将星星放进横向列表中，还能经过横向列表的项数据记载每颗星星的方位；为了让每颗星星都能够在已点亮与未点亮的情况中切换，能够经过在列表项中放置条件式容器，并在条件式容器中增加“未点亮”、“已点亮”两种可选情况来完成。
完成组件搭建： 1. 显现总分：增加文字组件至页面中，并修正其巨细、方位、款式及数据 2. 显现星星：增加条件式容器组件至横向列表中，并修正其巨细、方位及款式
2.1. 双击横向列表进入容器视图，增加条件式容器至聚集视图中，并修正其巨细、方位、款式及数据 2.1.1 巨细、方位、款式如下图
2.1.2 在条件式容器-数据中增加可选情况“未点亮”和“已点亮”，留意次序依次是“未点亮”和“已点亮”（假如增加反了，能够拖动可选情况进行次序调整）
2.1.3 双击条件式容器进入条件式子容器中，增加图片组件至“未点亮”条件式子容器和“已点亮”条件式子容器中，并修正合适的巨细、方位及款式 2.1.4 别离上传“星星_未点亮”图片和“星星_已点亮”图片至对应条件式子容器的图片组件中（图片能够在文章开头中找到）
2.3 双击空白处回来聚集视图，点击“聚集视图”字样，拖动修正视图宽度
第二步：绑数据 摆好组件后预览作品，是否能看见五颗星星已经在横向列表中依次排列了呢？ 结论是不能。
究其原因是，尽管咱们摆好了组件，但是此刻的横向列表中并没有任何数据，所以预览后会发现列表什么都不显现。 咱们能够为列表创立一个数据模型，并在数据模型中创立五条新记载，这样就能让列表在小程序运行时呈现五个能够放置星星的方位。 一起为了更精确地定位用户是点击了哪一颗星星，需求给星星编上号，咱们在创立数据模型时就增加一个用来记载编号的字段，在为列表创立新记载时用字段保存1～5的编号，然后将编号与星星逐个对应起来，这样就能够精确地知道用户点了编号为几的星星。 ●树立stars数据模型，并在模型中创立number字段，字段类型为“整数”，预览小程序然后让数据模型收效。
留意：预览之前需求先进行“小程序授权” 预览成功后，等候一分钟左右改写页面，即可进入管理后台界面手动增加数据。 手动增加数据后作用如下：
stars数据表中的记载是默许依照更新时刻排序，为保证列表项数据从左往右依次取到1～5的编号，咱们需求在为横向列表绑定数据源时，选择用number字段升序排序。 ●为星星_横向列表绑定数据源stars，并设置以编号升序排序，无过滤条件。
页面数据常用于页面内的数据中转，用户点击星星但未提交评分时，星星评分都是暂时的可更改的数据。由此咱们能够使用页面数据暂时保存用户点击的星星编号。 ●在星星评分页面增加一个名为“clickstar”，类型为整数的页面数据。
用户点击哪颗星星实际上便是点击了星星地点的列表项，由此在列表项中能够设置列表项被点击时，将该项对应的星星编号赋值给页面数据，然后达到用页面数据保存用户点击了哪颗星星的作用。 ●双击横向列表进入列表聚集视图，点击“聚集列表”字样，为其设置点击时设置页面数据的行为，一起改写列表。
第三步：设条件 根据功用展现，咱们能够观察到，假如用户点击的是第3颗星星，那么编号是1-3的星星就要切换到点亮情况，编号是4～5的星星就要切换到未点亮的情况；假如用户点击的是第4颗星星，那么编号是1-4的星星就要切换到点亮情况，编号是5的星星就要切换到未点亮的情况。 那么对这5颗星星而言，假如本身编号小于等于用户点击的那颗星星编号，则会被点亮；假如本身编号大于用户点击的那颗星星编号，则不会被点亮。 用clickstar页面数据表明用户点击的那颗星星的编号，再用列表项数据中的number来表明每个星星本身的编号，咱们简化以上规律能够得出：在每颗星星中，假如number小于等于clickstar，则该星星会被点亮；假如number大于clickstar，则该星星不会被点亮。
条件式容器默许显现第一个条件式子容器的内容，常见的星星式评分在未操作的情况下一般呈现全未点亮的情况，所以咱们将未点亮条件式子容器放在条件式容器可选情况的第一个。 条件式容器中的可选情况是从上到下判别的，假如条件式子容器中设置的条件被满意，就显现该子容器中的内容，否则会持续判别下一个条件。所以咱们只需求设置未点亮情况中的条件即可。
彩蛋：文字评价
第一步：组件 根据功用展现，咱们得知文字会随着星级的改变而改变，由此咱们能够使用条件式容器来完成作用。 ●增加条件式容器组件至页面中，并修正其巨细、方位、款式及数据
第二步：数据 ●增加文字组件至条件式子容器，并修正其巨细、方位、款式及数据
第三步：条件 星级和文字是一一对应的关系，由此咱们只需在每个条件式子容器中设置用户点击哪颗星就显现对应的文字内容即可。
●根据思想导图中的提示，完成各条件式子容器的条件设置（操作示范以“超赞”为例）
要点复习：页面数据 页面数据：常用于页面上数据的暂时存储。 条件式容器: 常用于同一个地方显现不同情况。 ●可选情况: 即条件式子容器, 从上到下的次序(聚集形式从左到右的次序) 开端匹配每个情况的条件, 假如条件满意，就显现该条件下的取值，否则会持续下一个条件是否被满意。
