uniapp-使用wxs实现一个拖拽组件

WXS具备如下特征：

• WXS是可以在视图层（webview）中运行的JS
• WXS无法直接修改业务数据，仅能设置当前组件的class和style，或者对数据进行格式化。要修改逻辑层的数据，需要通过 callMethod，传递参数给逻辑层
• WXS是被限制过的JavaScript，可以进行一些简单的逻辑运算
• WXS可以监听touch事件，处理滚动、拖动交互

故可以得出WXS的适用场景，主要包括：

• 用户交互频繁、仅需改动组件样式（比如布局位置），无需改动数据内容的场景，比如侧滑菜单、索引列表、滚动渐变等
• 数据格式处理，比如文本、日期格式化，或者国际化。通过WXS可以模拟实现Vue框架的过滤器,如下是一个通过wxs实现首字母大写的示例：

作者：CHB 链接：juejin.cn/post/684490… 来源：稀土掘金

用wxs实现的拖拽能更为流畅,用实机操作更为明显

下面直接贴代码

<template>
	<view>
		<view class="area">
			<view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
		</view>
	</view>
</template>

<script module="test" lang="wxs">
	var startX = 0;
	var startY = 0;

	var lastLeft = 50;
        var lastTop = 50;
	function touchstart(event, ins) {
	  var touch = event.touches[0] || event.changedTouches[0]
	  startX = touch.pageX
	  startY = touch.pageY
	}
        function touchmove(event, ins) {
            var touch = event.touches[0] || event.changedTouches[0]
            var pageX = touch.pageX
            var pageY = touch.pageY
            var left = pageX - startX + lastLeft
            var top = pageY - startY + lastTop
            startX = pageX
            startY = pageY
            lastLeft = left
            lastTop = top
            event.preventDefault()  //阻止默认的事件,如页面出现滚动
            ins.selectComponent('.movable').setStyle({
                left: left + 'px',
                top: top + 'px',
            })
            return false
	}
	module.exports = {
            msg: '拽',
            touchstart: touchstart,
            touchmove: touchmove
	}
</script>



<style>

.area{
	position: absolute;
	width: 100%;
	height: 100%;
}
.movable{
	position: absolute;
	width: 100px;
	height: 100px;
	left: 50px;
	top: 50px;
	color: white;
	text-align: center;
	line-height: 100px;
	background-color: red;
}
</style>

• 之后给需要使用的页面加入<touchstart></touchstart>即可

• 在拖拽页面的时候，会带动页面的滚动，解决这个问题很简单,在area view中添加 catchtouchmove="return"

• 滑动报错在错误的标签上添加 @touchmove.prevent @touchmove.prevent @touchmove="(event)=>{event.preventDefault()}"