• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

弹出 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(微信同号)




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序弹出和隐藏遮罩层动画以及五星评分发布时间:2022-07-18
下一篇:
微信小程序底部弹框动画发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap