前言

開發(fā)過小程序的同學(xué)可能對這兩個內(nèi)置組件并不陌生，他們配合用來實現(xiàn)在頁面中可以拖拽滑動，其中：

• movable-area表示元素可移動的區(qū)域，它決定元素移動的區(qū)域范圍
• movable-view表示可移動的視圖容器，它決定了什么元素可以移動

使用上要求movable-view必須是movable-area的直接子節(jié)點，否則不能移動。

這兩個組件對于比較常規(guī)的可拖拽移動產(chǎn)品需求可以輕松應(yīng)對，但是針對一些稍微復(fù)雜的需求，可能需要對他們的用法原理要進(jìn)一步掌握理解。

重新認(rèn)識movable-area和movable-view

在微信小程序官網(wǎng)介紹movable-area時，有過這樣的一段提示：

1. tip: 當(dāng) movable-view 小于 movable-area 時，movable-view的移動范圍是在 movable-area 內(nèi)；
2. tip: 當(dāng) movable-view 大于 movable-area 時，movable-view的移動范圍必須包含movable-area（x軸方向和 y 軸方向分開考慮）

上面兩個組件比較大小是基于各自的尺寸大小而言的，也就是對應(yīng)矩形的區(qū)域面積而言。

其實官網(wǎng)上面對二者關(guān)系的說明不是太詳細(xì)，有很多情況需要區(qū)分開；本人在項目做了不同的嘗試，下面是總結(jié)的不同情況，有不對的地方還請大家斧正。

movable-area和movable-view的一方完全包含另一方

針對movable-area和movable-view其中一方的尺寸大小可以完全覆蓋另一方的尺寸大小時，其移動范圍表現(xiàn)比較好理解。

例如下圖為movable-view的尺寸完全覆蓋movable-area的區(qū)域時，movable-view的可以移動范圍演示圖：

movable-view不管怎么移動都要完全包含住movable-area，也就是說movable-area不能超出movable-view的區(qū)域范圍；反之亦然。

那么大家有沒有想過，若不滿足一方能完全包含另一方，也就是二者區(qū)域存在交叉時，movable-view的移動范圍是怎么表現(xiàn)的呢？

movable-area與movable-view區(qū)域交叉

所謂區(qū)域交叉，是指一方不能完全覆蓋另一方時，二者區(qū)域有部分重疊；針對這種情況其表現(xiàn)是有差異，這時movable-view的移動范圍就要針對x軸方向和 y 軸方向分開考慮。

總結(jié)來說：

二者交叉時，不看movable-area與movable-view的區(qū)域誰大誰小，而是看movable-view寬高值最大的那個方向。

舉個例子：movable-view的width比其height大，因為其跟movable-area區(qū)域交叉，那么兩個不同方向的最大移動范圍表現(xiàn)：

• 水平方向：movable-view的width要完全包含movable-area的width
• 垂直方向： movable-view的height要被movable-area的包含覆蓋

如下移動演示圖：

movable-area區(qū)域大小為0，而movable-view不為0

movable-view的區(qū)域大于0，而movable-area的面積為0的在移動過程會有怎樣的表現(xiàn)呢？

首先，看下movable-area區(qū)域為0的兩種形式：

• movable-area組件的width和height都為0
• movable-area組件的width和height其中只有一個為0

那么在這兩種情況下，movable-view的移動范圍是什么呢，思考幾秒鐘。

其實，針對movable-area的寬高都為0的情況，可以將上圖的黑色正方塊想象成一個尺寸為0的一個點，只不過在界面不會展示，但是其位置還在對應(yīng)位置，那么movable-view就是圍繞該不可見點的位置移動，不能超過這個范圍，如下圖所示，為了方便展示將該點位置用紅色點表示。

針對movable-area的width和height任一個為0的情況，與二者同時為0將其想象一個點的情況主要區(qū)別是，可以將movable-area想象其為一條不可見的直線，它也不會在界面展示，但是它決定了movable-view移動范圍，我們以width為0，height不為0的情況來說明movable-view的移動范圍，如下圖演示：

movable-area與movable-view區(qū)域大小同時為0

首先介紹本節(jié)前說明一下：

• moable-view為0不代表不能移動，例如其子元素有尺寸，依然可以移動
• 在二者區(qū)域都為0的情況下，頁面是不會展示對應(yīng)元素的，下圖以演示目的會將其畫出來表示其在頁面的位置

movable-area或者movable-view區(qū)域為0的情況，有兩種情況：要么元素的width和height都為0，或者二者不同時為0。

下面我們來介紹下movable-view在其width和height不同時為0情況下（同時為0不會有移動的元素）的移動范圍，該前提下要區(qū)分movable-area區(qū)域為0的情況。

• movable-area的寬高同時為0，movable-view的width不為0，height為0的情況（height不為0 的情況類似）。

• movable-area的寬高不同時為0

  • 若movable-area和movable-view的width都不為0，或者h(yuǎn)eight都不為0，其表現(xiàn)如下圖演示：
  • movable-area的有width為0，height不為0，而movable-view的width不為0，height為0的情況移動范圍演示如下圖，相反的情況類似；

由上面的演示可以得知：

movable-area和movable-view同時為0的情況，跟二者區(qū)域不為0且存在交叉的情況下表現(xiàn)類似。

movable-view的子元素內(nèi)容超過其尺寸

movable-area和movable-view元素必須設(shè)置width和height，但是有時我們movable-view的子元素內(nèi)容超過其設(shè)置的寬高，這時其表現(xiàn)如何呢？

先說結(jié)論：

拖拽滑動元素的移動范圍是由movable-area和movable-view元素決定的，與movable-view的子元素尺寸沒有關(guān)系。

也就是說，movable-area和movable-view的寬高一旦設(shè)置后，移動范圍就固定了，如下圖所演示。

movable-view決定可拖動元素

要實現(xiàn)元素可拖動，至少要滿足：

• 可拖動元素必須通過movable-view設(shè)置
• movable-view必須為movable-area的直接子元素

說明一下，可以在movable-area中設(shè)置多個movable-view表示設(shè)置多個可滑動的塊，例如這文章# 微信小程序基于movable-area實現(xiàn)DIY T恤/logo定制實現(xiàn)的拖動。

實現(xiàn)一個卡片多段式拖動

例如有一個產(chǎn)品需求屏幕內(nèi)一個卡片支持多段式滑動，例如下圖所示的三段式：

要求：頁面數(shù)據(jù)初始化后卡片移動到h2的為位置，用戶手動拖動到h2 ~ h1的中間位置靠上時，卡片移動到h1的位置，中間位置靠下的話還是移動到h2的位置，h1~h0之間的移動后卡片位置策略與h2 ~ h1一樣。

一個實現(xiàn)思路：可以借鑒上面討論的movable-area和movable-view區(qū)域都為0，但是二者存在交叉的情況，具體實現(xiàn)：

• movable-area設(shè)置其區(qū)域尺寸為width為0，height為100vh
• movable-view設(shè)置其區(qū)域尺寸width為100vw，height為0
• movable-view的子元素內(nèi)容即為卡片的展示內(nèi)容

這樣，movable-view在垂直方向的移動范圍就是movable-area的高度范圍，相當(dāng)于在垂直方向，movable-area的長度大于movable-view，所以后者的移動范圍不能超出前者。

wxml的結(jié)構(gòu)如下所示：

<movable-area
   style="width: 0; height: 100vh;"
>
  <movable-view
    direction="vertical"
    y="{{offsetY}}"
    style="width: 100vw; height: 0;"
    bindchange="onChange"
    bind:touchend="onTouchEnd"
    bind:touchcancel="onTouchEnd"
  >
    <view class="movable-content">
       <view class="card">
           ...
       </view>
    </view>
  </movable-view>
</movable-area>

可以在movable-view的change事件中收集卡片滑動后的y方向的偏移值，在觸摸事件的結(jié)束最后統(tǒng)一計算卡片的最終滑動偏移量值。

Page({
 // 下面的h0、h1、h2、100vh 分別表示需求要求設(shè)置的卡片多段式滑動范圍
 data: {
     offsetY: h2,
     segs: [{
         value: h0,
         mix_value: h0,
         max_value: (h0 + h1)/2
     }, {
         value: h1,
         mix_value: (h0 + h1)/2,
         max_value: (h1 + h2)/2
     }, {
         value: h2,
         mix_value: (h1 + h2)/2,
         max_value: 100vh
     }]
 },
 ...
 onChange(event) {
   if (event.detail.source) {
      this._offsetY = event.detail.y
   }
 },
 onTouchEnd() {
     const y = this._offsetY;
      const idx = this.segs.findIndex(item => {
        return (
          y >= item.min_value && y <= item.max_value
        );
      });
      if (idx !== -1) {
        this.setData({
            offsetY: this.segs[idx].value
        })
      }
 }
})