本篇文章给大家介绍一下小程序实现“五星评价”功能的方法，支持实现点击评分、滑动评分。
小程序— 五星评价功能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 class="scorecontent" id="scorecontent"> <block wx:for='{{5}}' wx:key='item'> <!-- 遍历评分列表 --> <view class='starlen' catchtouchmove='changescore' catchtouchend="changescoreend" catchtap='setscore' data-index="{{index}}"> <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scorearray的下标 --> <image class='star' src="{{score>index?(score>index+0.5?fullstarurl:halfstarurl):nullstarurl}}" /> </view> </block></view>
以上渲染中重要的是，三目运算所要展示的应该是哪种图标，index为scorearray的元素下标，每一个item的下标index都要与score进行比较，规则如下：
//取 score与index下标做比较,默认score为0score<index 展示nullstar.pngscore>index+0.5 展示fullstar.pngindex<score<=index+0.5 展示halfstar.png
data预设值 /** * 组件的初始数据 */ 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()},
点击评分
点击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, }) }},
更多编程相关知识，请访问：编程视频！！
以上就是浅谈小程序怎么实现“五星评价”功能（支持点击+滑动）的详细内容。