视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2020-11-27 22:09:33 责编:小采
文档


scroll-view滚动穿透,阻止滚动

页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式

常用阻止滚动方式

在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动

<view catchtouchmove="doNothing"></view>

也可直接写catchtouchmove,相当于绑定了事件名为true的事件

问题场景

在小程序中,在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素,必须使用scroll-view组件,无法阻止页面本身的滚动

解决办法

既然无法简单的阻止事件穿透,就在页面可滚动的元素本身想想办法:

页面滚动元素

小程序中的简单布局,在页面内容超出一屏时,滚动的元素是page

如何让页面不滚动

将page的高度设为100%,页面最外层放一个view,打开弹窗时通过一个class增加样式,设页面高度100%,overflow: hidden来停止滚动

打开弹窗时设isStopBodyScroll为true,关闭时设为false

<view class="{{isStopBodyScroll ? 'scroll-lock' : ''}}">
 <!-- 页面内容 -->
</view>
.scroll-lock {
 height: 100%;
 overflow-y: hidden;
}

存在的问题

这样设置页面会回到顶部,期待有更好的解决方式或官方对这个问题提供支持

下载本文
显示全文
专题