uniapp 滚动尺

scale组件代码（部分class样式使用到了uview1.0的样式）

<template>
	<view>
		<view class="scale">
			<view class="pointer u-flex-col u-col-center">
				<u-icon name="arrow-down-fill" size="26" color="#33B4C2"></u-icon>
			</view>
			<view class="ruler">
				<scroll-view class="scroll" :scroll-x="true" :scrollLeft="scrollLeft" @scroll="scaleScroll"
					@touchstart="touchstart" @touchend="touchend">
					<view class="u-col-top" style="display: inline-flex;padding: 0 calc(50%);">
						<template v-for="(item,index) in scale">
							<view :class="['line',item%10==0?'int':(item%5==0?'middle':'')]"
								:style="{width: `${width}rpx`}" >
								<view class="value" v-if="item%10==0">
									<text>{{item/10}}</text>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Scale',
		components: {},
		props: {
			value: {
				type: String,
				default: '0.0'
			},
			// 最小值
			min: {
				type: Number,
				default: 0,
			},
			// 最大值
			max: {
				type: Number,
				default: 100,
			},
			// 每个刻度宽度
			width: {
				type: Number,
				default: 10,
			},
		},
		data() {
			return {
				scrollLeft: 0,//
				left:0,//
				isScroll: true,//用户是否停止操作
				scrollTimer:null,
				manual:false,
				implement:false,//是否还在滚动
			};
		},
		computed: {
			scale() {
				//计算出标尺所有刻度
				let arr = [];
				for (let i = this.min*10; i <= this.max * 10; i++) {
					arr.push(i);
				}
				return arr;
			},
			widthPx(){
				//每个刻度宽度
				return uni.upx2px(this.width);
			}
		},
		created() {
			//数据回显
			let val = parseFloat(this.value);
			if(val<=this.min){
				this.$emit('input',this.min.toFixed(1))
			}else{
				this.scroll()
			}
		},
		methods: {
			//滚动
			scaleScroll(e) {
				
				if(!this.manual){
					return;
				}
				
				//还在滚动中
				this.implement = true;
				
				//获取滚动距离
				let scrollLeft = e.detail.scrollLeft;
				this.left = scrollLeft;
				
				//计算对应值
				let index = (scrollLeft / this.widthPx).toFixed(0);
				let value = (this.scale[parseInt(index)]/10).toFixed(1);
				this.$emit('input', value);
				
				//避免重复执行@scroll
				clearTimeout(this.scrollTimer);
				this.scrollTimer = setTimeout(()=>{
					//判断用户是否已经停止操作
					if(this.isScroll){
						this.scroll()
					}
				},300)
			},
			//开始滚动
			touchstart(e) {
				this.isScroll = false;
				this.manual = true;
			},
			//用户停止操作
			touchend(e) {
				this.isScroll = true;
				this.implement = false;
				//解决scaleScroll已经执行完，但标尺未吸附问题
				setTimeout(()=>{
					//判断是否还在滚动并且是否已经吸附
					if(this.left!=this.scrollLeft&&!this.implement){
						this.scroll()
					}
				},300)
			},
			//标尺吸附
			scroll(){
				//吸附时禁止执行@scaleScroll,防止一直滚动，数据异常
				this.manual = false;
				
				//计算滚动距离
				let index = this.scale.indexOf(parseInt(this.value*10));
				this.scrollLeft = index * this.widthPx;
			}
		},
	};
</script>

<style lang="scss" scoped>
	.scale {
		width: 100%;

		.pointer {
			position: relative;
			padding-bottom: 12rpx;

			&::after {
				position: absolute;
				z-index: 9;
				top: 38rpx;
				content: '';
				display: block;
				width: 4rpx;
				height: 78rpx;
				background: #33B4C2;
			}
		}

		.ruler {
			height: 114rpx;

			.scroll {
				height: 100%;
				width: 100%;

				::-webkit-scrollbar {
					width: 0;
					height: 0;
					color: transparent;
				}

				.line {
					position: relative;
					height: 36rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					&:last-child{
						width: 2rpx !important;
					}

					&::after {
						content: '';
						position: absolute;
						display: block;
						width: 2rpx;
						height: 100%;
						top: 0;
						left: 0;
						background: #C1E8ED;
					}

					.value {
						left: -23rpx;
						position: absolute;
						bottom: -48rpx;
						width: 46rpx;
						height: 36rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #C1C1C1;
						line-height: 36rpx;
						text-align: center;
					}
				}

				.int {
					height: 66rpx;
				}

				.middle {
					height: 50rpx;
				}
			}
		}
	}
</style>

使用方式

<script>
	import Scale from '@/components/Scale/index.vue';
	export default {
		components: {
			Scale
		},
		data() {
			return {
				value:'10.0',
			}
		},
	}
</script>

<view class="value">
			<text>{{value}}</text>
		</view>
		<scale v-model="value" :width="16"></scale>

<style lang="scss">
	.value{
		padding: 36rpx 0 20rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #33B4C2;
		line-height: 50rpx;
		text-align: center;
		&::after{
			content: ' 公斤';
			height: 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #33B4C2;
			line-height: 50rpx;
		}
	}
</style>