为了账号安全,请及时绑定邮箱和手机立即绑定

微信小程序实现星星评价功能

标签:
小程序 源码

这个功能在日常的开发也是比较常见,结合项目需要以及网上的一些代码实现了一个评价小demo,效果请看下图,源码请点击这里

功能实现的思路:使用wx:for遍历循环N个区域,通过判断背景图数组中flag值来动态设置N个区域中背景图为哪一个

<view class='star-wrap'>
  <view 
    class='star-item' 
    wx:for="{{stars}}" 
    wx:key="" 
    style='background:url("{{item.flag==1?item.lightImg:item.blackImg}}") no-repeat top;background-size:100%;' 
    data-index="{{index}}" 
    bindtap='starClick'
  >
  </view>
</view>

我们先来看看data中的数据,starDesc为初始评价文字,stars为背景图数组对象,assessLists为快捷评价文字

data: {
  starDesc: '非常满意,无可挑剔',
  stars: [{
    lightImg: '/images/star_light.png',
    blackImg: '/images/star_black.png',
    flag: 1,
    message: '非常不满意,各方面都很差'
  }, {
    lightImg: '/images/star_light.png',
    blackImg: '/images/star_black.png',
    flag: 1,
    message: '不满意,比较差'
  }, {
    lightImg: '/images/star_light.png',
    blackImg: '/images/star_black.png',
    flag: 1,
    message: '一般,还要改善'
  }, {
    lightImg: '/images/star_light.png',
    blackImg: '/images/star_black.png',
    flag: 1,
    message: '比较满意,仍要改善'
  }, {
    lightImg: '/images/star_light.png',
    blackImg: '/images/star_black.png',
    flag: 1,
    message: '非常满意,无可挑剔'
  }],
  assessLists: ['意见很有帮助', '态度非常好', '非常敬业', '非常专业认真', '回复很及时', '耐心细致']
}

接下来是点击星星事件,思路是这样的:首先把所有区域的背景图设置为非点亮状态,然后再设置相对应数组下标区域以及数组下标前区域的背景图为点亮状态。

starClick: function(e) {
  var that = this;
  for (var i = 0; i < that.data.stars.length; i++) {
    var allItem = 'stars[' + i + '].flag';
    that.setData({
      [allItem]: 2
    })
  }
  var index = e.currentTarget.dataset.index;
  for (var i = 0; i <= index; i++) {
    var item = 'stars[' + i + '].flag';
    that.setData({
      [item]: 1
    })
  }
  // 评价星星文字说明
  this.setData({
    starDesc: this.data.stars[index].message
  })
}

以上思路有点绕,这是其中一种方法,相信你们能想到更好的方法,欢迎前来交流交流。

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消