微信小程序 解決自定義彈出層滑動時下層頁面滾動問題

彈出 fixed 彈窗后，在彈窗上滑動會導致下層的頁面一起跟着滾動。

場景一：彈窗內無滾動內容

可以在彈窗最外層元素綁定touchmove事件，觸發事件返回false即（在vue類框架中也可以加.stop阻止冒泡）。

簡單寫法：catchtouchmove='preventTouchMove'，在js文件中定義一個方法preventTouchMove() { return } 即可。

此種方式會阻止彈窗內內容的滾動。

場景二：彈窗內有滾動內容

在彈窗外層根元素動態添加一個no-scroll樣式，定義no-scroll為{height: 100%; overflow: hidden;}

當需要阻止滑動的彈窗顯示時添加no-scroll，彈窗關閉去掉no-scroll即可。

此種方式的缺點是當彈窗顯示增加no-scrll后彈窗下面的頁面會回到頂部。

場景三：

WXML
將整個底層頁面使用 scroll-view 包裹起來，設置 scroll-y 當顯示彈出層的時候為 true， 閉關彈出層的時候為 false

<scroll-view scroll-y="{{showModalStatus?'true':'false'}}" style="height:{{windowHeight}}px"

> </scroll-view>

  WXSS

　Page 設置為絕對定位，寬高各百分之百 ， scroll-view 高度 百分之百

  

Page{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  overflow-y: hidden;
}
.scroll-view {
  height: 100%;
}

  JS

data {
　　windowHeight: wx.getSystemInfoSync().windowHeight,
   showModalStatus: false
},

 JS 控制 showModalStatus 的開關。  

 不過這引入了新的問題，無法觸發 onReachBottom  頁面上拉觸底和下拉刷新事件的處理函數

 不介意的話可以使用 scroll-view 的 bindscrolltolower 進行解決 bindscrolltolower 方法觸發 onReachBottom()， 用scroll-view 的bindscrolltoupper進行解決 bindscrolltoupper方法觸發onPullDownRefresh()

 WXML

<scroll-view bindscrolltolower='bindscrolltolower'

               bindscrolltoupper='bindscrolltoupper'

 　　　　　　　scroll-y="{{showModalStatus?'true':'false'}}" style="height:{{windowHeight}}px"

> </scroll-view>

  JS

data {

　　windowHeight: wx.getSystemInfoSync().windowHeight,

},
bindscrolltolower:function(){
  console.log('bindscrolltolower')
  var page = getCurrentPages().pop()
  console.log(page)
  page.onReachBottom()
},

　bindscrolltoupper: function () {

　  let page = getCurrentPages().pop()

　  page.onPullDownRefresh()

　},

親測有效，有問題可以聯系我：

　　QQ：412606846（微信同號）