当前位置：首页 > news >正文

uniapp刻度尺的实现（swiper）滑动打分器

news 来源：原创 2024/5/20 2:41:52

实现图（百分制）：滑动swiper进行打分，分数加减

在这里插入图片描述

<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>

/* 分数波动过程中显示实时分数*/ /*滑动过快会有问题*/
transScore(e){this.transFlag = trueif(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.currentScorethis.currentSwiper = e.detail.current;this.transFlag = false;this.scoreFlag = false;setTimeout(()=>{this.scoreFlag = true},600)
},

.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;}
}