微信小程序的页面弹窗过长滚动导致的底层滚动(滚动穿透问题)解决办法

分类 文章 222阅读阅读模式

对于微信小程序,弹窗时,如果弹窗内容过长,需要滚动,滚动同时,底部页面跟着滚动,这如何优雅的处理这个问题?

处理1(不推荐): --添加 position:fixed

弹窗时通过给底部最大的view标签添加position:fixed;,从而达到页面不会跟着弹窗滚动

  1. <view style="position:fixed;">
  2.   超长底部内容
  3.   <view>弹窗超长内容</view>
  4. </view>

缺点:在取消了该属性后,页面自动滚动回页面顶部,失败。

 

处理2(不推荐):--添加 catchtouchmove 事件

给弹窗页面添加一个蒙层,蒙层绑定一个事件 catchtouchmove="preventTouchMove",对于函数 preventTouchMove则添加一个空函数回调,如下:

  1. <view>
  2.   超长底部内容
  3.   <view>弹窗超长内容</view>
  4.   <view catchtouchmove="preventTouchMove">蒙层</view>
  5. </view>

JS

  1. preventTouchMove() {}

缺点:滑动蒙层区域不会滚动,但是滑动弹窗内容时,页面还是会滚动,失败。

 

处理3(不推荐):--使用 scroll-view 标签

给页面添加 scroll-view 标签,在弹窗时给 scroll-view 标签的 scroll-y 的属性设为 false ,如下

  1. <scroll-view scroll-y>
  2.   超长底部内容
  3. </scroll-view>
  4. <view>弹窗超长内容</view>

缺点:看起来挺好用的,问题是,当遇到页面内容有 textarea 等原生组件时,页面就错乱了,失败;

 

最终处理4(推荐):通过样式处理

由看到一句话这么说的:

后来尝试在浏览器调试给 page 加上 overflow:hidden 发现可行,比如弹起的时候给 page 加上 overflow:hidden ,隐藏的时候去掉,但是官方并没有给我们操作 page 的方法。

 

不妨换个思维,对于页面,我们是可以通过标签控制样式的。

如果开始时给 page 添加一个 overflow: hidden 的同时给 page 标签下面添加一个替代 page 的标签的 view 标签,命名为 .page-inner。

对于类 page-inner 添加一个 overflow: auto ,这样,下次进行弹窗时,直接操作 page-inner 的 overflow 就行了;

完美解决如下

  1. wxml
  2. <page>
  3.   <view ckass="page-inner">
  4.     超长底部内容
  5.     <view>弹窗超长内容</view>
  6.   </view>
  7. </page>
  8. css
  9. page {
  10.   overflow:hidden;
  11.   height: 100%;
  12. }
  13. .page-inner {
  14.   overflow:auto;
  15.   height: 100vh;// 重点
  16. }

只需要在弹窗时,给 page-inner 添加 overflow:hidden 属性即可,成功;

注意:这将会导致 onPageScroll 失效,如果有页面需要用到 onPageScroll  请在该页面添加一下代码

  1. /** 清除滚动禁止代码 start **/
  2. page,.container{
  3.   height: auto;
  4.   overflow: auto;
  5. }
  6. /** 清除滚动禁止代码 ent **/

 

完毕!

相关文章

给我留言

  • 有人回复时邮件通知我