微信小程序移动拖拽视图-movable-view实例详解
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要介绍了微信小程序移动拖拽视图-movable-view的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
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实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，长沙网络推广会及时回复大家的！