用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序自定义弹层禁止页面滚动方案详解

Rolan 2019-8-21 00:52

方案一:通过小程序自定义组件 scroll-view实现布局,动态修改 scroll-y属性组件及属性介绍: developers.weixin.qq.com/miniprogram…缺点: 布局局限于 scroll-view组件, 大部分需求都满足不了方案二:自定义弹层 ...

方案一:通过小程序自定义组件 scroll-view 实现布局,动态修改 scroll-y 属性

组件及属性介绍: developers.weixin.qq.com/miniprogram…

缺点: 布局局限于 scroll-view 组件, 大部分需求都满足不了

方案二:自定义弹层蒙层或者外层容器添加 catchtouchmove 事件

<view class="mask-box" catchtouchmove="preventTouchMove">
    <!--弹层内容-->
</view>
复制代码

缺点: 弹层滑动不了;适用于自定义弹层不滑动的布局。

方案三:动态添加给最外层元素增加 position:fixed 样式

<view style="{{isMask ? 'position:fixed; top: 0; left: 0;' : ''}}">
  <!--内容区-->
</view>
复制代码

缺点: 当 isMask 为 true 时,页面始终会回到顶部;体验过不了关;

方案四:通过动态修改样式处理 (推荐)

原理: 小程序没提供 API 给我们动态修改 page 样式, 那我们换个思路,最开始给 page 设置 overflow: hidden , 最外层布局设置 overflow: auto 但是设置 height 属性时还是有坑。 如下:

  • height: 100vh 时,上拉加载、下拉刷新在安卓端失效,ios没问题; 适用于当前页面不需要上拉、下拉刷新

  • page 设置 overflow: hidden 时, 安卓端页面整体滑动不了; 适用于底层布局不需要滑动

  • page 设置 overflow: visible , 以上问题均解决 (推荐)

代码如下: wxml:

view class="content {{isMask? 'page-hidden' : ''}}">
复制代码

wxss:

page {
  overflow: visible;
  height: 100%;
}
.group-buying-list{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.page-hidden{
  overflow: hidden
}
复制代码

若有疑问欢迎留言指正

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 赖先生 来自: 掘金