zoukankan      html  css  js  c++  java
  • 微信小程序 解决自定义弹出层滑动时下层页面滚动问题

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



  • 相关阅读:
    eslint 的 env 配置是干嘛使的?
    cookie httpOnly 打勾
    如何定制 antd 的样式(theme)
    剑指 Offer 66. 构建乘积数组
    剑指 Offer 65. 不用加减乘除做加法
    剑指 Offer 62. 圆圈中最后剩下的数字
    剑指 Offer 61. 扑克牌中的顺子
    剑指 Offer 59
    剑指 Offer 58
    剑指 Offer 58
  • 原文地址:https://www.cnblogs.com/zlfProgrammer/p/10750058.html
Copyright © 2011-2022 走看看