2023年微信小程序視圖容器 movable-area

微信小程序視圖容器movable-area是一個可移動的區(qū)域，在頁面中可以拖拽滑動。對于那些需要在小程序中加入拖拽和滑動操作的企業(yè)來說，movable-area與movable-view組合的使用，提供了非常好用的解決方案。

1. movableView的特點

movableView具體有哪些特點呢？除了上述介紹的可移動、拖拽和滑動以外，它還具有以下幾個屬性：

1. direction：移動方向，有all、vertical、horizontal、none四種選擇；
2. inertia ：是否帶有慣性；
3. out-of-bounds ：超過可移動區(qū)域后是否還可以移動；
4. x 和 y ：分別代表x軸和y軸方向的偏移；
5. damping ：控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快；
6. friction ：控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大于0，否則會被設(shè)置為默認(rèn)值。

2. movableArea與movableView的使用

同時，我們需要注意以下幾點：

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

并且，在使用時，我們需要給movable-area設(shè)置height和width屬性，默認(rèn)情況下為10px。如果movable-view小于movable-area，則移動范圍是在movable-area內(nèi)；反之，范圍必須包含movable-area（沿x軸和y軸分別考慮）。

3.示例代碼

<view style="height:300px;">
  <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>

Page({
  data: {
    x: 0,
    y: 0
  }
})

通過上述示例代碼，可以看到movable-view就像一個單獨的視圖組件一樣被嵌入到了movable-area中，可以隨意拖拽和滑動進(jìn)行移動操作。如此方便實用的movable-area該得到大家的青睞。如果貴企業(yè)在小程序中需要加入拖拽、滑動操作，那么不妨考慮采用movable-area與movable-view組合的方式。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標(biāo)明：himall原創(chuàng)>