uniapp实现滑动评分效果
本⽂实例为⼤家分享了uniapp实现滑动评分的具体代码，供⼤家参考，具体内容如下
uniapp开发、滑动评分、点击评分
<template>
<view>
<view class="flex" >
<block v-for="(item,index) in scoreArray" :key='index' ><!-- 遍历评分列表 -->
beard什么意思<!-- 设置触摸事件和点击事件为同⼀个⽅法，否则点击却不滑动的话，不触发事件 -->
<view class='starLen' @touchmove='changeScore' @tap='changeScore' >
<!-- 使⽤三⽬运算符来动态变化显⽰的是哪张图⽚,score是js中的分数,index是scoreArray的下标 -->
<!-- src部分可以这样写 src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}" ，这样
可以在js⽂件把fullStarUrl和nullStarUrl去掉 --> <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl" />
</view>
</block>
<view class='scoreContent'>{{scoreContent}}</view><!-- 显⽰当前评分 -->
</view>
</view>
</template>
<script>
export default{
onLoad() {
},
data(){
return{
fullStarUrl: '满星的图⽚', //满星图⽚
nullStarUrl: '空星图⽚', //空星图⽚
score: 0, //评价分数
scoreArray: [1, 2, 3, 4, 5], //分为1-5个评分层次
scoreText: ['1星', '2星', '3星', '4星', '5星'], //评分列表
scoreContent: '' //⽂字显⽰评分情况
}
},
methods:{
changeScore: function(e) {
console.log(e)//控制台触摸事件信息bless什么意思
var that = this;
var num = 0;//临时数字，动态确定要传⼊的分数
var touchX = e.touches[0].pageX;//获取当前触摸点X坐标
var starMinX = 110;//最左边第⼀颗星的X坐标，假设距离页⾯距离为110，距离左边的距离是多少
var starWidth = 15;//星星图标的宽度，假设15(已在wxss⽂件中设置".star")
var starLen = 5;//星星之间的距离假设为5(已在wxss⽂件中设置".starLen")
var starMaxX = starWidth * 5 + starLen * 4+starMinX;//最右侧星星最右侧的X坐标，需要加上5个星星的宽度和4个星星间距
在线英汉翻译
if (touchX > starMinX && touchX < starMaxX) {//点击及触摸的初始位置在星星所在空间之内
/
/使⽤il()⽅法取得当前触摸位置X坐标相对于(星星+星星间距)之⽐的整数，确定当前点击的是第⼏个星星
悬浮议会
num = il((touchX - starMinX) / (starWidth + starLen));
if (num != that.score) {//如果当前得分不等于刚设置的值，才赋值，因为touchmove⽅法刷新率很⾼，这样做可以节省点资源
that.score = num,
that.scoreContent=that.scoreText[num - 1]
realize过去式}
金针菇的英文} el if (touchX < starMinX) {//如果点击或触摸位置在第⼀颗星星左边，则恢复默认值，否则第⼀颗星星会⼀直存在
that.score = 0,hint
that.scoreContent =''
}
},
}
}
</script>
<style lang="less" scoped>
.starLen{
margin-right: 10rpx;
display: inline-block;
}
.star{
width:30rpx;
height:30rpx;
}
.scoreContent{
margin-left: 100rpx;
耐心英语
display: inline-block;
莫言演讲稿color: #fff;
}shirt的音标
</style>
代码中的距离都是按照10px/2，转为5rpx，（如果使⽤其他单位，请⾃⾏转换）var starMinX = 110，最左边的星星离屏幕左边的距离
var starWidth = 15 ，为星星的宽度
var starLen = 5，为两个星星之间相隔的距离。
⽰例效果：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
