星星评价小程序、网页通用

发表于2018-06-14更新于2018-06-14字数统计201阅读时长1分阅读次数

先看效果图
效果图

原理是需要两张图片 一张选中的黄色，一张未选中的灰色
选中

未选中

1、循环image标签五次
2、绑定点击事件
3、获取点击下标，并赋值给score变量
4、三目运算判断score变量于index 的关系 动态更改图片路径
5、此方法网页也可用 通用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//wxml
<image class="start" 
        wx:for="{{5}}" 
        data-index="{{index}}"
        bindtap='selectIndexNum' 
        src="{{score >= index ? '/utils/img/[email protected]' : '/utils/img/[email protected]'}}"
/>

//普通版本 js
selectIndexNum(e){
  this.setData({
    score: +e.currentTarget.dataset.index
  })
},

或者增强版效果

1
2
3
4
5
6
7
//点两次相同分数取消选择 js
selectIndexNum(e){
  const i = +e.currentTarget.dataset.index;
  this.setData({
    score: i === this.data.score ? -1 : i
  })
},