浅谈小程序怎么实现“五星评价”功能（支持点击+滑动）

/*wxss 一行内展示五颗星并设置其间距为30rpx*/.scoreContent {display: inline-block;}.starLen {margin-right: 30rpx;display: inline-block;}.scoreContent .starLen:last-child {margin-right: 0;}.star {width: 80rpx;height: 80rpx;vertical-align: text-bottom;display: inline-block;}

/*wxml 每个starLen元素上绑定 touchMove touchEnd tap事件*/<view>  <block>    <!-- 遍历评分列表 -->    <view>      <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->      <image>index?(score&gt;index+0.5?fullStarUrl:halfStarUrl):nullStarUrl}}" /&gt;    </image></view>  </block></view>

//取 score与index下标做比较,默认score为0score<index score>index+0.5  展示fullStar.pngindex<score><ul><li><strong>data预设值</strong></li></ul><pre class="brush:js;toolbar:false;">  /**   * 组件的初始数据   */  data: {    fullStarUrl: '/images/full.png', //满星图片    halfStarUrl: '/images/half.png', //半星图片    nullStarUrl: '/images/null.png', //空星图片    score: 0, //评价分数    rate: 2,  //设计稿宽度÷屏幕实际宽度    startX: 0, //第一颗星screenX的距离  },

//设定比率rate与第一颗星screenX    组件初始化attached  或者 页面初始化onShowattached: function () { // 在组件实例进入页面节点树时执行  let { screenWidth } = wx.getSystemInfoSync();  let rate = screenWidth / 750;  this.setData({    rate: rate  })    const query = this.createSelectorQuery();  query.select('#scoreContent').boundingClientRect((res)=> {    this.setData({      startX: res.left    })  }).exec()},