uniapp movable-area滑块拖动

nvue版

<div class="submit-btn" ref="box" @touchmove='moveStart' @touchend='moveEnd'>
    <movable-area class="area-main" :animation="true">
        <movable-view class="on-track" :animation="true" :damping="100" :x="vx" direction="horizontal" @change="onMove" :disabled="disabled">
            <image src="../../static/image/arrow-double-right.png" class="iconfont-image"></image>
         </movable-view>
    </movable-area>
    <text class="btn-name">右滑验证</text>
</div>

<script>
var _this;
const dom = weex.requireModule('dom');
export default {
	data() {
		return {
			vx:0,
			oldx:0,
			isOk: false,
			winWidth:0,
			winHeight:0,
			sysW:0,
			disabled:false,
			pullStatus:true
		}
	},
	onReady(){
		setTimeout(()=> {
			const result = dom.getComponentRect(this.$refs.box, option => {
				this.sysW = parseInt(option.size.width - uni.upx2px(60)); // 滑动区域宽度
			})
		 }, 1000);
	},
	onLoad() {
		_this = this;
		
		uni.getSystemInfo({
			success(res) {
				if(Number(res.safeAreaInsets.bottom) == 0){
					_this.safeBottom = 20;
				}else{
					_this.safeBottom = res.safeAreaInsets.bottom;
				}
				_this.winWidth = res.windowWidth;
				_this.winHeight = parseInt(Number(res.windowHeight) - Number(_this.statusBarHeight) - 40);
			}
		});
		
	},
	methods: {
		moveStart(e){
			if(_this.pullStatus){
				const vx = parseInt(e.changedTouches[0].pageX - ((_this.sysW * 0.1) + 25));
				_this.vx = vx;
				if (vx < 25) _this.vx = 0;
			}
		},
		moveEnd(e){
			if (_this.vx >= _this.sysW) { // 结束了
				console.log(_this.vx);
				_this.disabled = true;
				uni.showLoading({
					title:"请求中..."
				});
				setTimeout(function(){
					_this.vx = 0;
					_this.disabled = false;
					uni.hideLoading();
					console.log('开始重置');
				},3000);
			}else{
				_this.vx = 0;
			}
		},
		onMove(e){
			_this.vx = e.detail.x;
		}
	}
}
</script>

.area-main{position: absolute;left: 0;top: 0;height: 120upx;width: 477upx;}
.on-track{width: 120upx;height: 120upx;line-height: 120upx;text-align: center;flex-direction: row;align-items: center;justify-content: center;}
.iconfont-image{width: 50upx;height: 50upx;}

注：movable-area 必须要设置宽高；动态设定未必生效；满屏设置 750upx ；其他宽度根据实际进行计算设定