uniapp 实现拖拽进度条，可自定义传入值

最近收到一个需求，需要做一个可拖拽的进度条，可传入默认值，最后做出来的效果如图：

基于微信小程序movable-view 进行改造成组件

什么是movable-view？
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。具体的链接可以查看uniapp 的官网： 链接
template:

 <movable-area class="sliderBar" :style="{width: (100)+'%'}">
 			<view class="gone" :style="{width: x +'px'}"></view>
 			<movable-view class="slider" direction="all" @change="onChange" :x='x' y='0'>
 				<text>{{ score }}</text>
 			</movable-view>
 		</movable-area>

methods:

	onChange: function(e, i) {
 			if (this.isChange) {
 				this.x = e.detail.x
 				this.score = parseInt(this.x / this.slideBarWidth * this.maxScore)
 				this.$emit('change', this.score)
 			}
 			setTimeout(()=>{
 				this.isChange=true
 			},2500)
 		},
 		// 外部调用这个方法
 		changeX(score) {
 			this.isChange = false
 			this.x = this.slideBarWidth * score / this.maxScore
 			console.log(this.x)
 			this.score = score
 		}

调用组件

<sliderBar ref='sliderBar' :max='1000' :min='0' @change='change'></sliderBar>

在父组件页面调用方法就可以出现自定义传值了

   setTimeout(() => {
 			this.$refs.sliderBar.changeX(this.circleValue)
 		}, 500)

联系我

如需项目demo，微信扫下面的二维码，注册成功，到下面的我的-联系客服 问我要代码)