小程序如何实现自定义弹层禁止页面滚动
这篇文章主要介绍小程序如何实现自定义弹层禁止页面滚动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
10年积累的做网站、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有大同免费网站建设让你可以放心的选择与我们合作。
方案一:通过小程序自定义组件scroll-view实现布局,动态修改scroll-y属性缺点:布局局限于scroll-view组件,大部分需求都满足不了
方案二: 自定义弹层蒙层或者外层容器添加catchtouchmove事件
```js弹层内容 ``` 缺点:弹层滑动不了;适用于自定义弹层不滑动的布局
方案三:动态添加给最外层元素添加position:fixed样式
```js内容区 ``` 缺点:当isMask为true时,页面始终会回到顶部;体验不好
方案四:通过动态修改样式处理(推荐)
原理: 小程序API给我们动态修改page样式,那我们换个思路,最开始给page设置*overflow:hidden*, 最外层布局设置 *overflow:auto* 但是设置height属性时还是有坑。如下: - *height:100vh* 时,上拉加载、下拉刷新在安卓端失效,ios没问题;适用于当前页面不需要上拉、下拉刷新。 - *page* 设置 *overlfow:hidden;* 时,安卓端页面整体滑动不了;适用于底层布局不需要滑动 *page* 设置 *overflow: visible*, 以上问题均解决 代码如下:wxml ```jspage { overflow: visible; height: 100%; } .group-buying-list{ height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .page-hidden{ overflow: hidden } ```
以上是“小程序如何实现自定义弹层禁止页面滚动”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网页标题:小程序如何实现自定义弹层禁止页面滚动
分享路径:http://myzitong.com/article/jhsedp.html