彈出(chu) fixed 彈窗(chuang)后，在彈窗(chuang)上滑動(dong)會導致下層的頁面(mian)一起跟著滾動(dong)。

場景(jing)一：彈窗內(nei)無滾動內(nei)容(rong)

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

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

此種(zhong)方式會阻止彈窗內內容(rong)的(de)滾動。

場景二：彈(dan)窗內有滾動內容

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

當需要阻(zu)止滑(hua)動的彈窗顯示(shi)時添(tian)加no-scroll，彈窗關閉去掉no-scroll即(ji)可。

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

場景三：

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

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

> </scroll-view>

  WXSS

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

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 的開關。  

 不過這引(yin)入了新的問題(ti)，無(wu)法觸發 onReachBottom  頁面(mian)上拉觸底和下拉刷(shua)新事(shi)件的處(chu)理函數

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

 WXML

<scroll-view bindscrolltolower='bindscrolltolower'

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

> </scroll-view>

  JS

data {

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