微信小程序中如何实现movable-view拖拽功能的详细教程？

本文共计289个文字，预计阅读时间需要2分钟。

在JS中，sender参数（sender是事件的传递值）仅在发生一次touch移动时提前。对于多次touch，需要在changedTouches数组中查找redclick：function(sender){ wx.showModal({ title: '点击红色', content: '', }); console.log(sender); }

JS中的sender参数（sender是事件的传值）前提是只有一个touch移动的时候。多个touch需要在

changedTouches

数组中查找

redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedTouches[0].pageX); },

.wxss内容：

<view>移动视图控件</view> <!-- 创建一个move-area --> <movable-area style="width:100%;height:1000rpx;background:gray;"> <!-- 可以移动view 黄色、宽高100rpx--> <movable-view style='background:yellow;width:100rpx;height:100rpx;' direction="all"> </movable-view> <!-- 可以移动view 红色、宽高100rpx--> <movable-view style='background:red;width:100rpx;height:100rpx;' direction="all" bindtap='redclcik' bindtouchmove='redmove'> </movable-view> </movable-area>

视图效果：

总结

以上所述是小编给大家介绍的微信小程序移动拖拽视图-movable-view实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！