▍寫在前面（來訪者請直接瀏覽下一條）

最近在做一個美食類小程式的時候，需要用到一個購物車，自己不好構思，就仿照美團的購物車寫了一個，然後就在這卡了一下：購物車列表是fixed脫離文字流的，在上下滾動購物車列表的時候，底部的頁面竟然也會跟著滾動，這怎麼成，所以我就找了一下關於這個問題的解決方案。

▍效果預覽

首先小聲說一句，為了節約時間，所以在做資料模擬顯示的時候，所有的圖片還有名稱、銷量都用了同一個，只是改了一下相應的價格用以區分。

▍實現方法

【注意】本文只記錄【禁止頁面滑動】的方法，不涉及關於購物車的設計方法。

1、首先設計出一個底部頁面；

2、製作出一個覆蓋在上層的模組（當然，最初製作的時候，底部滾動條有時候會跟著購物車的滾動條一起滾動）；

3、【方法核心】：改變容器的height屬性：auto↔100%。

【實際操作】：

3.1：給底部頁面設定動態class屬性或者id屬性用以改變其css樣式，這裡我使用isHiddenShoppingList這個變數來控制是否要賦予底部頁面（container）container-ban這個屬性；

3.2：設定container-ban這個class屬性的樣式：

.container-ban{
  height: 100%;
  overflow: hidden;
}

一般來說這樣就可以實現功能了，但是有時候還是會有特例（僅上述程式碼無法實現功能），比如我的這個頁面就是，即使使用了上面的程式碼還是無法達到最終預期效果。因為我的這個container-ban它的外部沒有我自己編寫的view容器，所以它的父級元素是page，而我對page的高度是沒有限制的，所以container-ban的height: 100%;並沒有起到實際的作用。

3.3：固定底部頁面的父級元素的高度為100%；

page{
  height: 100%;
}

.container-ban{
  height: 100%;
  overflow: hidden;
}

最後實現了最終效果。到這裡，整個流程就結束了。

▍後續。。。

當我再次用到這個方法時，發現確實實現了禁止頁面滾動的效果，但是，同時也帶來了副作用：如果底部頁面比較長，在固定底部頁面時，底部頁面會自動跳到頁面的最頂端（我本來在頁面中間點了一個按鈕，想要彈出一個框框，結果點完之後，底部頁面直接滾到了最頂端，然後我就不知道我點了列表中的哪一項的按鈕，尷尬。。。）而這一切都是overflow: hidden;做的怪。

既然有缺陷，就要找一個更好的方法，要讓底部頁面不會滾到最頂端，找了半天終於有了收穫。終於有了方法：將底部頁面用scroll-view包裹，固定的時候就底部頁面就不會自動滾動到最頂端了。

方案如下：

page {
  height: 100%;
  overflow-y: hidden;
}

/* scroll-view容器 */
.container {
  height: 100%;
}

<scroll-view class='container' scroll-y='{{isHideDialog}}'>
    ……
</scroll-view>

▍再後續。。。

前面的功能實現之後，我又發現了一個新問題，因為我原本正常的下拉重新整理，現在不能下拉了，因為scroll-view覆蓋了全域性，我在往下滑的時候，頁面會以為我只是在scroll-view裡下滑，不能感覺到我是想下拉重新整理。

▍參考文件