微信小程序移动拖拽视图-movable-view实例详解

2020-03-21 15:25:46

字体：大中小

来源：转载

供稿：网友

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