小程序模板网

小程序效果--星星评价(网页通用)

发布时间:2018-06-15 14:12 所属栏目:小程序开发教程

先看效果图(忽略我家猫)

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

选中 

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

 

  1. //wxml
  2. <image class="start"
  3. wx:for="{{5}}"
  4. data-index="{{index}}"
  5. bindtap='selectIndexNum'
  6. src="{{score >= index ? '/utils/img/big_star_s@3x.png' : '/utils/img/big_star_n@3x.png'}}"
  7. />
  8.  
  9. //普通版本 js
  10. selectIndexNum(e){
  11. this.setData({
  12. score: e.currentTarget.dataset.index - 0
  13. })
  14. },

或者增强版效果

 

  1. //点两次相同分数取消选择 js
  2. selectIndexNum(e){
  3. let i = e.currentTarget.dataset.index;
  4. if(i == this.data.score){
  5. this.setData({
  6. score: -1
  7. })
  8. }else {
  9. this.setData({
  10. score: e.currentTarget.dataset.index - 0
  11. })
  12. }
  13. },


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24549.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询