对于微信小程序,弹窗时,如果弹窗内容过长,需要滚动,滚动同时,底部页面跟着滚动,这如何优雅的处理这个问题?
处理1(不推荐): --添加 position:fixed
弹窗时通过给底部最大的view标签添加position:fixed;,从而达到页面不会跟着弹窗滚动
超长底部内容
弹窗超长内容
缺点:在取消了该属性后,页面自动滚动回页面顶部,失败。
处理2(不推荐):--添加 catchtouchmove 事件
给弹窗页面添加一个蒙层,蒙层绑定一个事件 catchtouchmove="preventTouchMove",对于函数 preventTouchMove则添加一个空函数回调,如下:
超长底部内容
弹窗超长内容
蒙层
JS
preventTouchMove() {}
缺点:滑动蒙层区域不会滚动,但是滑动弹窗内容时,页面还是会滚动,失败。
处理3(不推荐):--使用 scroll-view 标签
给页面添加 scroll-view 标签,在弹窗时给 scroll-view 标签的 scroll-y 的属性设为 false ,如下
超长底部内容
弹窗超长内容
缺点:看起来挺好用的,问题是,当遇到页面内容有 textarea 等原生组件时,页面就错乱了,失败;
最终处理4(推荐):通过样式处理