前言

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

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

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

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

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

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

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

tip: 當(dāng) movable-view 大于 movable-area 時(shí)，movable-view的移動(dòng)范圍必須包含movable-area（x軸方向和 y 軸方向分開(kāi)考慮）

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

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

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

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

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

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

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

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

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

總結(jié)來(lái)說(shuō)：

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

舉個(gè)例子：movable-view的width比其height大，因?yàn)槠涓?code>movable-area區(qū)域交叉，那么兩個(gè)不同方向的最大移動(dòng)范圍表現(xiàn)：

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

如下移動(dòng)演示圖：

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

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

首先，看下movable-area區(qū)域?yàn)?的兩種形式：

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

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

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

針對(duì)movable-area的width和height任一個(gè)為0的情況，與二者同時(shí)為0將其想象一個(gè)點(diǎn)的情況主要區(qū)別是，可以將movable-area想象其為一條不可見(jiàn)的直線，它也不會(huì)在界面展示，但是它決定了movable-view移動(dòng)范圍，我們以width為0，height不為0的情況來(lái)說(shuō)明movable-view的移動(dòng)范圍，如下圖演示：

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

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

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

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

下面我們來(lái)介紹下movable-view在其width和height不同時(shí)為0情況下（同時(shí)為0不會(huì)有移動(dòng)的元素）的移動(dòng)范圍，該前提下要區(qū)分movable-area區(qū)域?yàn)?的情況。

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

movable-area的寬高不同時(shí)為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的情況移動(dòng)范圍演示如下圖，相反的情況類似；

由上面的演示可以得知：

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

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

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

先說(shuō)結(jié)論：

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

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

movable-view決定可拖動(dòng)元素

要實(shí)現(xiàn)元素可拖動(dòng)，至少要滿足：

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

說(shuō)明一下，可以在movable-area中設(shè)置多個(gè)movable-view表示設(shè)置多個(gè)可滑動(dòng)的塊，例如這文章 微信小程序移動(dòng)拖拽視圖-movable-view實(shí)例詳解

實(shí)現(xiàn)一個(gè)卡片多段式拖動(dòng)

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

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

一個(gè)實(shí)現(xiàn)思路：可以借鑒上面討論的movable-area和movable-view區(qū)域都為0，但是二者存在交叉的情況，具體實(shí)現(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在垂直方向的移動(dòng)范圍就是movable-area的高度范圍，相當(dāng)于在垂直方向，movable-area的長(zhǎng)度大于movable-view，所以后者的移動(dòng)范圍不能超出前者。

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事件中收集卡片滑動(dòng)后的y方向的偏移值，在觸摸事件的結(jié)束最后統(tǒng)一計(jì)算卡片的最終滑動(dòng)偏移量值。

Page({
 // 下面的h0、h1、h2、100vh 分別表示需求要求設(shè)置的卡片多段式滑動(dòng)范圍
 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
        })
      }
 }
})

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

最新評(píng)論