tip: 當 movable-view 小于 movable-area 時，movable-view的移動范圍是在 movable-area 內(nèi)；

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

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

其實官網(wǎng)上面對二者關系的說明不是太詳細，有很多情況需要區(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的一個點，只不過在界面不會展示，但是其位置還在對應位置，那么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的情況下，頁面是不會展示對應元素的，下圖以演示目的會將其畫出來表示其在頁面的位置

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，或者height都不為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元素必須設置width和height，但是有時我們movable-view的子元素內(nèi)容超過其設置的寬高，這時其表現(xiàn)如何呢？

先說結(jié)論：

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

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

movable-view決定可拖動元素

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

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

說明一下，可以在movable-area中設置多個movable-view表示設置多個可滑動的塊，例如這文章微信小程序移動拖拽視圖-movable-view實例詳解

實現(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設置其區(qū)域尺寸為width為0，height為100vh
movable-view設置其區(qū)域尺寸width為100vw，height為0
movable-view的子元素內(nèi)容即為卡片的展示內(nèi)容

這樣，movable-view在垂直方向的移動范圍就是movable-area的高度范圍，相當于在垂直方向，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 分別表示需求要求設置的卡片多段式滑動范圍
 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
        })
      }
 }
})

到此這篇關于微信小程序movable-view的可移動范圍的文章就介紹到這了,更多相關微信小程序movable-view內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: