关于如何实现小程序的“五星评价”功能（支持点击+滑动）（微信小程序实现五星评价）

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

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

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

2.原则

页面布局/*wxss连续显示五颗星，并将间距设置为30 rpx */。score content { display:inline -block；}.starLen { margin -right:30 rpx；显示:inline -块；}.scoreContentstarLen:last -child { margin -right:0；}.star { width:80 rpx；高度:80rpx垂直-对齐:文本-底部；显示:inline -块；}/*wxml将touchMove touchEnd tap事件绑定到每个starLen元素*/；& lt查看class = & amp#39;明星& amp#39;catchtouchmove = & amp#39;changeScore & amp#39;catchtouchend = & quotchangeScoreEnd & quotcatchtap = & amp#39;setScore & amp#39;data -index = & quot；{ { index } } & quot& gt& lt！--使用三眼操作符动态更改显示的图片，其中score是js中的分数，index是scoreArray的下标--》。& ltimage class = & amp#39;明星& amp#39;src = & quot{ { score & gt指数？（分数& gt指数+0.5？full star URL:half star URL）:nullstar URL } } & quot；/& gt；& lt/view & gt；& lt/block & gt；& lt/view & gt；在上面的渲染中重要的是三眼操作应该显示什么样的图标。索引是scoreArray的元素下标，每一项的下标索引都要与score进行比较。规则如下:

//将分数与索引下标进行比较，默认分数为0分

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

例如，单击第四颗星（index =“3”），前三颗星用整颗星填充，通过在半颗星和整颗星之间切换来显示当前单击的星。

set score（e）{//e . current target . dataset . index是当前项的下标let score = e . current target . dataset . index+1；//实际分数if（分数-this。数据。score = = 0.5）{//在当前半星和全星本之间切换。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文件中设置）。明星& quot）var starLen = 30 * this . data . rate；//恒星之间的距离假定为30（在wxss文件中设置）。starLen & quot）var star maxx = star minx+star width * 5+starLen * 4；//最右边星星的x坐标需要加上5颗星星的宽度和4颗星星之间的间距if（touchx》；starMinX & amp& amptouchX & lt= star maxx）{//点击触摸的初始位置在星所在的空间//使用Math.ceil（）方法得到当前触摸位置X坐标与（星+星间距）的比值的整数，确定哪个星Intmult = Math。当前单击了floor（（touch x-star minx）/（star width+Starlen）。restLen =（touchX -star minx）-int mult *（star width+starLen）；if（0 & lt；= restLen & amp& amprestLen & lt0.5 * star width）{//empty star score = int mult } else if（0.5 * star width《= restLen & amp；& amprestLen & ltstar width）{//display半星得分= int mult+0.5 } else if（star width

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：关于如何实现小程序的“五星评价”功能（支持点击+滑动）（微信小程序实现五星评价） https://zhujicankao.com/112876.html