滚动条实现

效果图：

实现代码

<template>
	<view>
		<image class="bg" mode="widthFix" src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/5_bg.png"></image>
		<view class="tip">
			{{answer_title}}
		</view>

		<movable-area class="doneBlock" id="doneBlock">
			<movable-view class="doneee" :x="x" :y="y" direction="horizontal" @change="onChange">
				<view class="done">
				</view>
			</movable-view>
		</movable-area>
 
		<view class="nums">
			<view class="">
				{{num_1}}
			</view>
			<view class="">
				{{num_2}}
			</view>
			<view class="">
				{{num_3}}
			</view>
			<view class="">
				{{num_4}}
			</view>
		</view>
		<view class="addBtn" @click="nav">
			提交查看喂养建议
		</view>
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				data: {},
				question_id: '',
				answer_title: '',
				question_answer: '',
				answer_max: '',
				answer_min: '',
				x: 0,
				y: 0,
				www: 230,
				num_1: 0,
				num_2: 0,
				num_3: 0,
				num_4: 0,
				show_gou: false,
				animation: {},
				animationData: {},
			}
		},
		onLoad(option) {
			console.log('load--index', option)
			this.data = JSON.parse(option.data)
			let that = this
			// getRankQuestion

			this.$request(this.$api.Baby.getRankQuestion).then(ress => {
				//  question_id      question_answer
				console.log('aaaaaaaaa', ress.data.question)
				this.question_id = ress.data.question.id;
				this.answer_max = ress.data.question.answer_max;
				this.answer_min = ress.data.question.answer_min;

				var num_item = Number((ress.data.question.answer_max / 3).toFixed(2))
				this.num_1 = 0
				this.num_2 = Math.round(num_item); 
				this.num_3 = Math.round(num_item + num_item);
				this.num_4 = Math.round(num_item + num_item + num_item);
				this.question_answer = this.answer_min
				this.answer_title = ress.data.question.title;
				// this.question_answer = ress.data.question.title;
			})
			this.getDescBox()
		},
		methods: {
			nav() {

				let data = this.data;
				data.question_id = this.question_id
				data.question_answer = this.question_answer
				console.log('data', data.imgSrc)
				if (data.imgSrc != 'cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/3_icon_6.png') {
					uni.uploadFile({
						url: this.$api.Baby.addBabyGrowInfo, //仅为示例，非真实的接口地址
						filePath: data.imgSrc,
						name: 'file',
						formData: data,
						header: {
							"ACCESS-TOKEN": uni.getStorageSync('token')
							// "ALATFORM": util.getPlatform(), //应用场景，在H5或者小程序或者其它
						},
						complete: (res) => {
							console.log('上传文件回调', res)
							var a = res.data
							var data2 = JSON.parse(a)
							console.log('data2', data2)
							if (data2.code != 0 || !res.data) {
								console.log('aaaaaaa')
								wx.showToast({
									title: data2.msg,
									icon: 'none'
								})
							} else {
								console.log('vvvvvvvv')
								uni.navigateTo({
									url: '../feedingAdvice/feedingAdvice?id=' + data2.data.id
								})
							}
						}
					});
				} else {

					this.$request(this.$api.Baby.addBabyGrowInfo, data).then(res => {
						var data2 = res.data
						console.log('data2', data2)
						if (res.data.id) {
							console.log('111111111')
							uni.showToast({
								title: '提交成功'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '../feedingAdvice/feedingAdvice?id=' + data2.id
								})
							}, 1500)
						} else {
							console.log('22222222')
							wx.showToast({
								title: data2.msg,
								icon: 'none'
							})
						}
					})
				}

			},
			onChange(e) {
				var x = e.detail.x;
				var num = parseInt(x / (230 / this.answer_max))
				this.question_answer = num
				console.log('aaa', num)

			},
			// 写法一：
			getDescBox() {
				uni.createSelectorQuery().in(this).select('.doneBlock').boundingClientRect(result => {
					if (result) {
						// this.www = parseInt(result.width);
						console.log('==========', this.www)

					} else {
						setTimeout(() => {
							this.getDescBox();
						}, 300)
					}
				}).exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		position: absolute;
		top: 0;
		background-color: #A8DFF4;
	}

	.doneBlock {
		position: absolute;
		top: 598rpx;
		left: 112rpx;
		width: 524rpx;
		height: 60rpx;
		// background-color: #d0d0d0;
	}

	.doneee {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.done {
		margin-left: 20rpx;
		margin-top: 18rpx;
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		background-color: red;
	}

	.tip {
		position: absolute;
		top: 434rpx;
		left: 12%;
		font-size: 30rpx;
		letter-spacing: 4rpx;
		font-weight: 600;
		width: 78%;
	}

	.nums {
		position: absolute;
		top: 654rpx;
		left: 12%;
		font-size: 30rpx;
		letter-spacing: 4rpx;
		font-weight: 600;
		width: 74%;
		display: flex;

		view {
			flex: 1;
			text-align: center;
		}
	}

	.addBtn {
		position: absolute;
		top: 854rpx;
		background-color: #FECB55;
		width: 500rpx;
		height: 70rpx;
		font-weight: 600;
		left: 50%;
		margin-left: -250rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 16rpx;
		font-size: 32rpx;
		letter-spacing: 2rpx;
	}
</style>