电影星星和评分处理
1.明确获取到的评分和星星的换算关系
/**
* 星星:
* 评分:0,40,30,20,0,50
* 评分与星星换算:40-->4
* star=[]
* 针对4星:[1,1,1,1,0]
*/
最终传入的星星数据是由数据进行存储的
2.utils.js中对于“将获取到的数据存储至数组中”定义函数star(评分)
function star(starNum){ var num = starNum.substring(0,1); var starArr = []; for(var i=0;i<5;i++){ if(i<num){ starArr.push(1); }else{ starArr.push(0); } } return starArr; } module.exports = { http:http, star:star }
代码解析:因为获取到的是评分(50、40),所以利用substring进行字符串截取以获得星星个数
3.在movie.js中调用star函数获“星星数组”
4.在movie.wxml中调用星星模板时,传递数据
5.stars-template.wxml中取得星星和评分值
<template name="starTemplate"> <view class="stars-container"> <view class="stars"> <block wx:for="{{ star }}" wx:for-index="index" wx:key="{{ index }}"> <image wx:if="{{ item }}" src="../../image/star.png"></image> <image wx:else src="../../image/chat.png"></image> </block> <view class="star-score">{{ average }}</view> </view> </view> </template>
实现的动态效果:
本节完成对星星和评分的处理,但是我们发现 “更多”按钮还不能点
所以下一节制作更多电影页面~