如何实现小程序的“五星评价”功能(点击+幻灯片支持)

本文介绍了小程序“五星评价”功能的实现方法，支持点击评分和滑动评分。

小程序-五星评价函数1。已完成的要求:

支持半星评价、点击评分和幻灯片评分【相关学习推荐:小程序开发教程】

2.原则

Page /*wxss在一行中显示五颗星，并将间距设置为30 rpx */。score content { display:inline -block；}.starLen { margin -right:30 rpx；显示:inline -block；}.scoreContentstarLen:last -child { margin -right:0；}.star { width:80 rpx；身高:80rpx垂直-对齐:文本-底部；显示:inline -block；}/*wxml每个starLen元素都绑定了一个touchMove touchEnd tap事件*/: lt；查看class = # 39斯塔伦 # 39；catchtouchmove = # 39changeScore # 39catchtouchend = changeScoreEnd catchtap = # 39setScore # 39data -index = ；{ { index } } gt lt！--使用三元运算符动态改变显示哪个图片。score是js中的分数，index是scoreArray >的下标--； ltimage class = # 39star # 39src = { { score gt指数？(分数 gt指数+0.5？full star URL:half star URL):nullstar URL } } ；/ gt； lt/view gt； lt/block gt； lt/view gt；上面的渲染中重要的是三眼操作中应该显示什么样的图标。index是scoreArray的元素下标，每一项的下标索引都要和score进行比较。规则如下:

//将分数与索引下标进行比较。默认分值为0分:指数+0.5显示Fullstar.png指数<得分 lt=index+0.5显示halfStar.pngdata/* *组件的初始数据*/data:{ fullStarUrl: # 39；/images/full . png # 39；，//全明星图片halfStarUrl: # 39；/images/half . png # 39；，//半星图片nullStarUrl: # 39；/images/null . png # 39；、//空星图片评分:0、//评测评分率:2、//设计草稿宽度÷实际屏幕宽度startX: 0、//第一颗星screenX的距离}、组件加载、数据初始化//设置比例率到第一颗星screenX组件初始化附加或页面初始化onshowattched:function(){//当组件实例进入页面节点树时，执行let { screen width } = wx . getsysteminfosync()；let rate =屏幕宽度/750；this . setdata({ rate:rate })const query = this . createselectquery()；query . select( # 39；# scoreContent # 39).bounding client rect((RES)= gt；{ this . setdata({ startx:RES . left })})。exec ()}，点选评分。

点击一次半星，点击两次全星；

例如，点击的是第四颗星(index = 3 )，前三颗星填充的是整星，当前点击的星是半星和整星的切换显示。

set score(e){//e . current target . dataset . index是当前项的下标let score = e . current target . dataset . index+1；//实际得分if(score -this . data . score = = 0.5){//当前半星与全星this.setdata({ score:score })} Else {//点击其他星this . setdata设定的得分({score: score -0.5})}}}

changeScore:函数(e){ let score = 0；设restLen = 0；//(当前触摸点与初始点的距离)-整数倍*(星星的宽度+星星的间距)剩余距离let int mult = 0；//取余数后的整星数var touchX = e . touchs[0]。pageX//获取当前触摸点的x坐标var star minx = this . data . startx；//最左边第一颗星的x坐标var star width = 80 * this . data . rate；//星形图标的宽度假设为80(已经在wxss文件中设置好了)。star )var starLen = 30 * this . data . rate；//星间距假设为30(已经在wxss文件中设置好了)”。斯塔伦 )var star maxx = star minx+star width * 5+starLen * 4；//最右边星的x坐标需要加上5颗星的宽度和4颗星之间的间距if(touchx >:= starMinX ； touchX lt= starMaxX) {//点击触摸的初始位置在星星所在的空间内。//使用Math.ceil()方法获取当前触摸位置的x坐标与(星星+星星间距)的比值的整数，确定当前点击的是哪颗星星int mult = math . floor((touch x-star minx)/(star width+starlen)。restLen =(touchX -star minx)-int mult *(star width+starLen)；if(0 lt；restLen restLen lt0.5 *星宽){//空星得分= intmult} else if (0.5 *星宽< = restLen restLen ltstar width){//Show half-star score = int mult+0.5 } else if(star width < = restLen){//Show the all star score = int mult+1；}如果(分数！= this.data.score) {//如果当前得分不等于刚刚设置的值，则赋值，因为touchmove方法刷新率高，可以节省一些资源this.setdata ({score: score，})} else if (touchx ；star maxx){ this . setdata({ score:5，})}}，更多编程知识请访问:编程视频！！以上就是小程序如何实现“五星评价”功能的细节(点击+幻灯片支持)。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：如何实现小程序的“五星评价”功能(点击+幻灯片支持) https://zhujicankao.com/77649.html