uniapp開發、 滑動評分、點擊評分，
<template>
<view>
<view class="flex" style="margin:200rpx;">
<block v-for="(item,index) in scoreArray" :key='index' ><!-- 遍歷評分串列 -->
<!-- 設定觸摸事件和點擊事件為同一個方法,否則點擊卻不滑動的話,不觸發事件 -->
<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" style="width: 30rpx; height: 30rpx;"/>
</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)//控制臺觸摸事件資訊
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) {//點擊及觸摸的初始位置在星星所在空間之內
//使用Math.ceil()方法取得當前觸摸位置X坐標相對于(星星+星星間距)之比的整數,確定當前點擊的是第幾個星星
num = Math.ceil((touchX - starMinX) / (starWidth + starLen));
if (num != that.score) {//如果當前得分不等于剛設定的值,才賦值,因為touchmove方法重繪率很高,這樣做可以節省點資源
that.score = num,
that.scoreContent=that.scoreText[num - 1]
}
} else if (touchX < starMinX) {//如果點擊或觸摸位置在第一顆星星左邊,則恢復默認值,否則第一顆星星會一直存在
that.score = 0,
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;
}
</style>
代碼中的距離都是按照10px/2，轉為5rpx，（如果使用其他單位，請自行轉換）
var starMinX = 110，最左邊的星星離螢屏左邊的距離
var starWidth = 15 ，為星星的寬度
var starLen = 5，為兩個星星之間相隔的距離，
示例效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301054.html
標籤：其他
上一篇：一杯茶的時間，搞定BEM命名規范
下一篇：vue組件間通信六種方式