直接贴上代码 可以直接当组件使用
*实现滑动评价类似大众点评也可以点击 实现半星评价 *
自己可以贴到开发工具 所有代码块注释说明了 如果还有看不懂的地方 欢迎评论
实现效果图
JS
Component({
data: {
fullStarUrl: '../../images/icon2/star1.png', //满星图片(ps:这里的图片你们自己引入)
nullStarUrl: '../../images/icon2/star2.png', //空星图片
callStarUrl: '../../images/icon2/star3.png', //半星图片
scoreArray: [1, 2, 3, 4, 5], //分为1-5个评分层次
},
properties: {
score: { //评价分数
type: Number,
value:0
},
},
methods:{
changeScore: function (e) {
var that = this;
var num = 0; //临时数字,动态确定要传入的分数
var touchX = e.touches[0].pageX - e.currentTarget.offsetLeft; //获取当前触摸点X坐标
console.log(touchX)
var starMinX = 0; //最左边第一颗星的X坐标,假设距离页面距离为0
var starWidth = 30; //星星图标的宽度,假设30(已在wxss文件中设置".star")
var starLen = 10; //星星之间的距离假设为10(已在wxss文件中设置".starLen")
var starMaxX = starWidth * 5 + starLen * 4; //最右侧星星最右侧的X坐标,需要加上5个星星的宽度和4个星星间距
if (touchX > starMinX && touchX < starMaxX) { //点击及触摸的初始位置在星星所在空间之内
num = (touchX - starMinX) / (starWidth + starLen);
if (num != that.data.score) { //如果当前得分不等于刚设置的值,才赋值,因为touchmove方法刷新率很高,这样做可以节省点资源
//半棵星 (这里为了更加清晰使用了if else 不然你可以用三目压缩 或者其他办法 只要你能看得懂 这里主要能实现)
if (num < 0.5 && num > 0) { // .5
num = 0.5
} else if (num < 1 && num > 0.5) { // 1
num = 1
} else if (num < 1.5 && num > 1) { // 1.5
num = 1.5
} else if (num < 2 && num > 1.5) { // 2
num = 2
} else if (num < 2.5 && num > 2) { // 2.5
num = 2.5
} else if (num < 3 && num > 2.5) { // 3
num = 3
} else if (num < 3.5 && num > 3) { // 3.5
num = 3.5
} else if (num < 4 && num > 3.5) { // 4
num = 4
} else if (num < 4.5 && num > 4) { // 4.5
num = 4.5
} else if (num < 5 && num > 4.5) { // 5
num = 5
}
that.setData({
score: num,
})
// 传递星级过去
this.triggerEvent('starNum', num)
}
} else if (touchX < starMinX) { //如果点击或触摸位置在第一颗星星左边,则恢复默认值,否则第一颗星星会一直存在
that.setData({
score: 0,
})
}
}
},
}
})
wxml
<view class="view_star" bindtouchmove='changeScore' bindtap='changeScore' >
<block wx:for='{{scoreArray}}' wx:key='item' ><!-- 遍历评分列表 -->
<!-- 设置触摸事件和点击事件为同一个方法,否则点击却不滑动的话,不触发事件 -->
<view class='starLen' >
<!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->
<image class='star' src="{{score > index ? score - index == 0.5 ? callStarUrl : fullStarUrl : nullStarUrl}}" />
</view>
</block>
</view>
wxss
.starLen{
margin-right: 10px;
display: inline-block;
}
.star{
width:30px;
height:30px;
vertical-align:text-bottom;
display: inline-block;
}
.scoreContent{
margin-left: 100px;
display: inline-block;
}
父组件使用就贴wxml代码了 json引入代码就根据你们自己的路径引入了
<star bind:starNum="getStarNum" score="{{dataArr.entity.scoreNum}}" display="{{true}}"></star>
starNum接受星数据 score 传递过去 父子组件+子组件通讯(复习一下)