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

弹出 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。

场景一:弹窗内无滚动内容

可以在弹窗最外层元素绑定事件,触发事件返回即(在类框架中也可以加.阻止冒泡)。

简单写法:='',在文件中定义一个方法() { } 即可。

此种方式会阻止弹窗内内容的滚动。

场景二:弹窗内有滚动内容

在弹窗外层根元素动态添加一个-样式,定义-为{: 100%; : ;}

当需要阻止滑动的弹窗显示时添加-,弹窗关闭去掉-即可。

此种方式的缺点是当弹窗显示增加-后弹窗下面的页面会回到顶部。

场景三:

将整个底层页面使用 - 包裹起来,设置 - 当显示弹出层的时候为 , 闭关弹出层的时候为

<- -="{{?'':''}}"

>

设置为绝对定位,宽高各百分之百 , - 高度 百分之百

{

: ;

: 100%;

: 100%;

: ;

-: ;

}

.- {

: 100%;

}

{

: .().,

:

},

控制 的开关。

不过这引入了新的问题,无法触发 页面上拉触底和下拉刷新事件的处理函数

不介意的话可以使用 - 的 进行解决 方法触发 (), 用- 的进行解决 方法触发()

<- ='' =''

-="{{?'':''}}"

>

{  : .().,

},

:(){

.('')

= ().()

.()

.()

},

: () {

= ().()

.()

},

© 版权声明
THE END
分享