浅谈小程序怎么实现“五星评价”功能(支持点击+滑动)
3929
本篇文章给大家介绍一下小程序实现“五星评价”功能的方法,支持实现点击评分、滑动评分。
小程序— 五星评价功能
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为0
- score<index 展示nullStar.png
- score>index+0.5 展示fullStar.png
- index<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 或者 页面初始化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,
- })
- }
- },
本文网址:https://www.zztuku.com/detail-9080.html
站长图库 - 浅谈小程序怎么实现“五星评价”功能(支持点击+滑动)
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!