微信小程序视图容器movable-area怎么用

小编给大家分享一下微信小程序视图容器movable-area怎么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

movable-area

基础库 1.2.0 开始支持，低版本需做兼容处理

movable-view 的可移动区域

注意：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/>组件中，并且必须是直接子节点，否则不能移动。

示例代码：

<view class="section">  <view class="section__title">movable-view区域小于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区域大于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怎么用”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！