微信小程序|小程序开发
小程序,五星评价
微信小程序-小程序开发
本篇文章给大家介绍一下小程序实现“五星评价”功能的方法，支持实现点击评分、滑动评分。
全军出击源码,ubuntu c 多线程,tomcat6打开后闪退,多线程爬虫 原理,PHP去掉数组第一个,seo发展咨询lzw
页游 充值平台源码,ubuntu进入其他文件,tomcat乱码是怎么回事,如何看网站爬虫,php远程连接mssql数据库,seo文章搬运lzw
小程序— 五星评价功能
织梦源码整码下载,ubuntu启动特别卡,tomcat有自带的日志那,爬虫饲养玩具,php签到时区问题,seo长文章lzw
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为0scoreindex+0.5 展示fullStar.jpgindex<score<=index+0.5 展示halfStar.jpg
data预设值
/** * 组件的初始数据 */ data: { fullStarUrl: /images/full.jpg, //满星图片 halfStarUrl: /images/half.jpg, //半星图片 nullStarUrl: /images/null.jpg, //空星图片 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 starMaxX) { this.setData({score: 5, }) }},
编程视频！！
如果觉得《浅谈小程序怎么实现“五星评价”功能（支持点击+滑动）》对你有帮助，请点赞、收藏，并留下你的观点哦！
