小程序如何实现五星评价功能

这篇文章主要介绍了小程序如何实现五星评价功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联服务项目包括柳林网站建设、柳林网站制作、柳林网页制作以及柳林网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，柳林网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到柳林省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

小程序— 五星评价功能

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

  
    
    
      
      index?(score>index+0.5?fullStarUrl:halfStarUrl):nullStarUrl}}" />
    
  

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

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

index
data预设值
  /**
   * 组件的初始数据
   */
  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) { //点击及触摸的初始位置在星星所在空间之内
    //使用Math.ceil()方法取得当前触摸位置X坐标相对于(星星+星星间距)之比的整数,确定当前点击的是第几个星星
    intMult = Math.floor((touchX - starMinX) / (starWidth + starLen));
    restLen = (touchX - starMinX) - intMult * (starWidth + starLen);

    if (0 <= restLen && restLen < 0.5 * starWidth) { //空星
      score = intMult
    } else if (0.5 * starWidth <= restLen && restLen < starWidth) { //显示半星
      score = intMult + 0.5
    } else if (starWidth <= restLen) { //显示整星
      score = intMult + 1;
    }
    if (score != this.data.score) { //如果当前得分不等于刚设置的值,才赋值,因为touchmove方法刷新率很高,这样做可以节省点资源
      this.setData({
        score: score,
      })
    }
  } else if (touchX < starMinX) { //如果点击或触摸位置在第一颗星星左边,则恢复默认值,否则第一颗星星会一直存在
    this.setData({
      score: 0,
    })
  } else if (touchX > starMaxX) {
    this.setData({
      score: 5,
    })
  }
},
感谢你能够认真阅读完这篇文章，希望小编分享的“小程序如何实现五星评价功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
            
            
                        

            本文名称：小程序如何实现五星评价功能            

            本文链接：http://cqcxhl.cn/article/phdsoj.html