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

本篇文章给大家介绍一下小程序实现“五星评价”功能的方法，支持实现点击评分、滑动评分。

小程序— 五星评价功能

1、已完成需求：

• 支持半星评价
• 点击评分
• 滑动评分

【相关学习推荐：】

2、原理

• 页面布局

/*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>

登录后复制

以上渲染中重要的是，三目运算所要展示的应该是哪种图标，index为scoreArray的元素下标，每一个item的下标index都要与score进行比较，规则如下：

//取 score与index下标做比较,默认score为0
score<index score>index+0.5  展示fullStar.png

index<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  或者 页面初始化onShow
attached: 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()
},

登录后复制

• 点击评分

  点击1次半星，点击2次整星；

  例如：点击是第4颗星(index=”3″)，前三颗星为整星填充，当前点击星为半星与整星的切换展示

  setScore(e) {
    //e.currentTarget.dataset.index 为当前的item的下标
    let score = e.currentTarget.dataset.index + 1;//实际的score
    if (score - this.data.score == 0.5) {//当前半星与整星的切换
      this.setData({
        score: score
      })
    } else {//点击其他星设置的分数
      this.setData({
        score: score - 0.5
      })
    }
  },

  登录后复制

• 滑动评分(关键部分)

  changeScore: function (e) {
    let score = 0;
    let restLen = 0; //(当前触摸点距初始点距离)-整数倍*(星星宽+星星之间间距)的剩余距离
    let intMult = 0; //取余后的整星数量
    var touchX = e.touches[0].pageX; //获取当前触摸点X坐标
    var starMinX = this.data.startX; //最左边第一颗星的X坐标
    var starWidth = 80 * this.data.rate; //星星图标的宽度,假设80(已在wxss文件中设置".star")
    var starLen = 30 * this.data.rate; //星星之间的距离假设为30(已在wxss文件中设置".starLen")
    var starMaxX = starMinX + starWidth * 5 + starLen * 4; //最右侧星星最右侧的X坐标,需要加上5个星星的宽度和4个星星间距
  
    if (touchX >= starMinX && touchX  starMaxX) {
      this.setData({
        score: 5,
      })
    }
  },

  登录后复制

更多编程相关知识，请访问：！！

以上就是浅谈小程序怎么实现“五星评价”功能（支持点击+滑动）的详细内容，更多请关注GTHOST其它相关文章！