如何彻底解决小程序滚动穿透问题

我们在开发过程中总会有开发弹窗的需求,在弹窗弹起来的时候,底部的内容却可以滚动,最开始我们使用catchtouchmove解决了,但是在特殊布局的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。

就不卖关子了,我摊牌了。

使用官方的page-meta组件,很多童鞋可能还不知道这个是干嘛的,这里贴下官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html

通过该组件我们可以直接操作Page组件 ,我们给它的wxss样式overflow动态设置hiddenorvisible 就可以控制整个页面是否可以进行滚动。

image.png

示例代码:
<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />
<button class="button" bindtap="handleClick">点我弹出弹窗</button>
<!-- 模拟页面滚动 -->
<view wx:for="{{300}}" wx:key="index">{{item}}</view>
<!-- 分享弹窗 -->
<view class="dialog-wrap {{visible ? 'active' : ''}}">
  <view class="dialog-back {{visible ? 'active' : ''}}"></view>
  <view class="share-box-container {{visible ? 'active' : ''}}">
    <view class="share-content">
      <view class="share-box">
        <button class="share-item" hover-class="none" open-type="share" bindtap="handleClose">
          <image src="https://qiniu-image.qtshe.com/20210409_wechat.png" mode="widthFix" />
        </button>
        <view class="share-item" bindtap="handleShareTimeLine">
          <image src="https://qiniu-image.qtshe.com/20210409_moment.png" mode="widthFix" />
        </view>
      </view>
    </view>
    <image src="https://qiniu-image.qtshe.com/20210409close-btn.png" class="close-btn" bindtap="handleClick" />
  </view>
</view>
控制弹窗显隐藏:
const app = getApp()

Page({
  data: {
    visible: false
  },
  onLoad() {
   
  },
  handleClick() {
    this.setData({
      visible: !this.data.visible
    })
  }
})
wxss弹窗样式太多,这里就不贴,放代码片段里了。

兼容底部是scroll-view,以及弹窗内的scroll-view都不会穿透影响底部的内容。


image.png

老规矩,结尾放代码片段:

https://developers.weixin.qq.com/s/U6ItgQmP7upQ

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【微信小程序】第二篇:常见问题解决及常用技能方法[https://www.jianshu.com/p/3ae04e...
    smartdream阅读 5,693评论 0 0
  • 微信小程序总结 一、开发前准备 1.设计图 关于设计图的尺寸,最好是让设计师给到我们前端的是750的设计稿,这样我...
    wjing静阅读 7,118评论 0 0
  • 以下是我接触小程序项目遇到过的一些问题做的一些记录。(后续有遇到新的问题再进行补充) 1.微信小程序的 text ...
    X_I_E阅读 5,888评论 0 1
  • 走进小程序 微信⼩程序的注册流程去微信公众平台注册⼩程序账号获得appid和appsecret 微信开发者⼯具安装...
    强某某阅读 2,767评论 0 2
  • 0 前言 最近的工作重心一直在小程序,也开发了几个小程序,对小程序开发的流程及相关技术相对比较熟悉,在开发过程中也...
    millan_mf阅读 66,073评论 2 16