微信小程序 解决自定义弹出层滑动时下层页面滚动问题

弹出 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

style="height:{{windowHeight}}px"

> 

  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

 
    

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

  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（微信同号）

转载于:https://www.cnblogs.com/zlfProgrammer/p/10750058.html