uniapp刻度尺的实现(swiper)滑动打分器

实现图(百分制):滑动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;
	}
}
相关推荐
2501_915909062 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918413 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者85 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle7 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_915921437 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q196328847512 小时前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
阿金要当大魔王~~13 小时前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
2501_9151063216 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074716 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone