微信小程序視圖容器movable-area怎么用

小編給大家分享一下微信小程序視圖容器movable-area怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

movable-area

基礎庫 1.2.0 開始支持，低版本需做兼容處理

movable-view 的可移動區(qū)域

注意：movable-area 必須設置width和height屬性，不設置默認為10px

movable-view

基礎庫 1.2.0 開始支持，低版本需做兼容處理

可移動的視圖容器，在頁面中可以拖拽滑動

movable-view 必須設置width和height屬性，不設置默認為10px

movable-view 默認為絕對定位，top和left屬性為0px

當movable-view小于movable-area時，movable-view的移動范圍是在movable-area內；當movable-view大于movable-area時，movable-view的移動范圍必須包含movable-area（x軸方向和y軸方向分開考慮）

注意：movable-view必須在<movable-area/>組件中，并且必須是直接子節(jié)點，否則不能移動。

示例代碼：

<view class="section">
  <view class="section__title">movable-view區(qū)域小于movable-area</view>
  <movable-area style="height: 200px;width: 200px;background: red;"><movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all"></movable-view>
  </movable-area>
  <view class="btn-area"><button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view class="section__title">movable-view區(qū)域大于movable-area</view>
  <movable-area style="height: 100px;width: 100px;background: red;" direction="all"><movable-view style="height: 200px; width: 200px; background: blue;"></movable-view>
  </movable-area></view>

Page({
  data: {
    x: 0,
    y: 0
  },
  tap: function(e) {this.setData({
      x: 30,
      y: 30});
  }
})

看完了這篇文章，相信你對“微信小程序視圖容器movable-area怎么用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！