近些日子,遇到了一个需求,就是一个红包组件,需要可以整个屏幕拖拽,实现后整理了如下资料
小程序自带拖拽组件
#movable-area(父容器) # movable-view (移动容器)
这两个组件要配合使用才行,
解释一下 :
movable-area 相当于是一个区域容器,只有在 movable-area覆盖的区域才能移动！！！,
movable-view 就是移动容器,实际拖拽移动的距离就是它在移动,把你要移动的内容放在movable-view里面即可
实际代码结构是这样的 :
/wxml
<movable-area class="" style="width: 75vw;height:67vh;position: fixed;top:100rpx ;left: 0;z-index: 9;">
<movable-view style="" x="{{250}}" y="{{450}}" direction="all"> //x 和 y 代表初始位置 direction可移动的方向 all为 垂直水平都可以
// 你要移动的视图放这里
</movable-view>
</movable-area>
只要设置好movable-area的大小覆盖区域, 即可随便拖拽,
这里说一下小程序写拖拽的坑;
坑1 : 卡顿
如果你是从web转过来小程序,你可能会觉得,小程序的拖拽也跟web一个样,给目标来个监听事件,获取响应的 X Y 的位移值,然后赋值给 目标容器, 这种方法虽然可行, 也最通俗易懂,
但是!!!! 别忘记了,小程序没有dom 这一种东西, 并且 小程序 是有性能限制的,你使用了这种方法后，拖拽会非常卡，卡到爆那种； 为什么呢？
当你不断的获取XY坐标值进行 赋值, 在setData的时候,就会出现性能问题,move事件一秒钟会触发多次,那你就必须一秒钟setData多次,这样就违背了小程序的规则了,
只要懂点小程序的都知道 小程序中setData是有性能消耗问题的,不能大量进行setData;
聪明的小伙伴都知道 小程序官方 是建议小程序中不要频繁的setData,以及data无关数据的冗余。
下面是小程序官方原话
setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口
所以不要使用这种方法
坑2： 遮罩层下的点击事件无效
当你用 movable覆盖完一个区域后，你会发现，处于 movable下的元素都无法点击了，无法触发点击事件， 为啥子咧？
是一个很简单的原因，你的 movable覆盖在 目标元素上面，你点击的时候只会触发到 movable的事件函数，是不会触发 movable下面的 元素的。
那怎么解决呢？事件传递？事件冒泡？事件委托？都不用！！！！！
只需要几行 css 代码就搞定了
/* css 写法*/
movable-area {
pointer-events: none;
}
movable-view {
pointer-events: auto;
}
/*less*/
movable-area {
pointer-events: none;
movable-view {
pointer-events: auto;
}
}
给movable-area 加个 pointer-events：none;
movable-view 加给pointer-events：auto；就行了
至于pointer-events 是什么意思的话？
我给出这样的解答
来自 MDN
pointer-eventsCSS属性 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
到这里你应该就学会小程序movable的拖拽了，我也不多说了，有疑问欢迎在下面提问；
o(￣▽￣)ブ
