实现图（百分制）：滑动swiper进行打分，分数加减
html
复制代码
<view class="scoring">
<view class="toggle">
<view class="score">
<text>{{'0'}}</text>
<view class="scoreId" >
<block v-if="transFlag&&scoreFlag">{{testScore}}</block>
<block v-else>{{currentScore}}</block>
</view>
<text>{{'100'}}</text>
</view>
<view>
<view class="line-con">
<text class="line"></text>
</view>
<swiper class="swipers" display-multiple-items="17" duration="400" easing-function="easeInOutCubic" @transition="transScore" @change="changeScore" :current="currentSwiper" >
<swiper-item class="swiperItems" v-for="(item,index) in 117" key="index">
<view class="lines"></view>
</swiper-item>
</swiper>
</view>
</view>
</view>
typescript
复制代码
/* 分数波动过程中显示实时分数*/ /*滑动过快会有问题*/
transScore(e){
this.transFlag = true
if(this.transFlag&&this.scoreFlag){
this.testScore = this.currentScore + Math.floor(e.detail.dx/21) <= 0? 0 :this.currentScore + Math.floor(e.detail.dx/20)
}else{
this.testScore = this.currentScore
}
},
/*打分动作回调-停下*/
changeScore(e){
this.currentScore = this.currentSwiper===null||this.currentSwiper===''?this.currentSwiper:e.detail.current;
this.testScore = this.currentScore
this.currentSwiper = e.detail.current;
this.transFlag = false;
this.scoreFlag = false;
setTimeout(()=>{
this.scoreFlag = true
},600)
},
css
复制代码
.toggle{
background-image: url(/static/image/toggle.png);
background-size: cover;
padding: 4px 4px 16px 4px;
border-radius: 8px;
box-shadow: 2px 6px 8px 0 #00622D17;
margin-top: 16px;
border-right: 1px solid #fbfcfdc2;
}
.score{
display: flex;
justify-content: space-between;
color: #BDBDBD;
font-size: 24rpx;
align-items: flex-end;
font-weight: bold;
position: relative;
height: 70rpx;
margin-top: 22rpx;
padding: 0 10px;
.scoreId{
color: #20A13E;
font-size:64rpx ;
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 0;
}
}
.swipers{
height: 100%;
width: 100%;
margin: 0 auto;
overflow: visible;
height: 100rpx;
}
.swiperItems{
font-size:24rpx;
position:relative;
margin-top: 32rpx;
height: 56rpx !important;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
.swiperItems > .lines{
background-color:#BDBDBD;
width:1px;
height:58rpx !important;
}
.line-con{
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.line{
position: absolute;
width: 6rpx;
height: 40px;
top: 20rpx;
background: #20a13e;
z-index: 6;
}
}