彈出 fixed 彈窗后，在彈窗上滑動(dòng)會(huì)導(dǎo)致下層的頁面一起跟著滾動(dòng)。

場景一：彈窗內(nèi)無滾動(dòng)內(nèi)容

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

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

此種方式會(huì)阻止彈窗內(nèi)內(nèi)容的滾動(dòng)。

場景二：彈窗內(nèi)有滾動(dòng)內(nèi)容

在彈窗外層根元素動(dòng)態(tài)添加一個(gè)no-scroll樣式，定義no-scroll為{height: 100%; overflow: hidden;}

當(dāng)需要阻止滑動(dòng)的彈窗顯示時(shí)添加no-scroll，彈窗關(guān)閉去掉no-scroll即可。

此種方式的缺點(diǎn)是當(dāng)彈窗顯示增加no-scrll后彈窗下面的頁面會(huì)回到頂部。

場景三：

WXML
將整個(gè)底層頁面使用 scroll-view 包裹起來，設(shè)置 scroll-y 當(dāng)顯示彈出層的時(shí)候?yàn)?true， 閉關(guān)彈出層的時(shí)候?yàn)?false

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

> </scroll-view>

  WXSS

　Page 設(shè)置為絕對定位，寬高各百分之百 ， 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 的開關(guān)。  

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

 不介意的話可以使用 scroll-view 的 bindscrolltolower 進(jìn)行解決 bindscrolltolower 方法觸發(fā) onReachBottom()， 用scroll-view 的bindscrolltoupper進(jìn)行解決 bindscrolltoupper方法觸發(fā)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()
　},