造轮子(一)--使用循环渲染实现星星评级组件

以下示例代码运行环境为微信小程序。

1.点亮的星星和未点亮的是两张图片，都是通过循环渲染生成的，初始化评级为0，则不亮的星星的个数为0，总评级减去当前评级。而点亮的星星个数就是评级数。

2.WXML文件里，先写点亮再写未点亮。如下：

<view class='star-cell' wx:for="{{feedbacks}}" wx:for-item="feedback" wx:for-index="findex" wx:for-key="findex">
 <text>{{feedback.feedbackname}}：</text>
 <view class='star-box'>
 <image data-yindex="{{yindex}}" 
 bindtap='howManyYellow' 
 wx:for="{{feedback.level}}" 
 wx:for-index="yindex" 
 src='../../images/star-selected.png'></image>
 <image data-index="{{index}}" 
 bindtap='howManyGray' 
 wx:for="{{5-feedback.level}}" 
 wx:for-index="index" 
 src='../../images/star.png'></image>
 </view>
</view>

3.script里写：

data:{
 feedbacks:[
 {
 feedbackname:"味道",
 level:0,
 },
 {
 feedbackname: "价格",
 level: 0,
 },
 {
 feedbackname: "服务",
 level: 0,
 }
 ]
}
 howManyGray(e){
 var findex = e.currentTarget.dataset.findex;
 var index = e.currentTarget.dataset.index;
 var farr = this.data.feedbacks;
 farr[findex].level=farr[findex].level+index+1;
 this.setData({
 feedbacks: farr
 })
 },
 howManyYellow(e) {
 var findex = e.currentTarget.dataset.findex;
 var yindex = e.currentTarget.dataset.yindex;
 console.log(yindex);
 var farr = this.data.feedbacks;
 farr[findex].level = yindex+1;
 this.setData({
 feedbacks: farr
 })
 }