小程序-移动拖拽视图-movable-view

本文发表于2018-5-11

2017年之前的微信版本并不支持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>

视图效果：

快去试试吧！欢迎留言，第一时间反馈！