解决小程序自定义弹窗滚动穿透问题

这篇具有很好参考价值的文章主要介绍了解决小程序自定义弹窗滚动穿透问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在小程序页面里有自定义弹窗时候,希望弹框里的scroll-view可以动,底部背景页面不要动

方法一、catchtouchmove="true"

可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动。

如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。

<view class="pop" catchtouchmove="true">
    <view class="content"></view>
</view>

或者


<view class="pop"  catchtouchmove="catchTouch">
    <view class="content"></view>
</view>

 methods = {
catchTouch () {
      return;
    }
  }

方法二、底部内容区使用scroll-view

设置scroll-view垂直滚动,并将scroll-view的高度设置为屏幕高度,这样就可以实现弹窗自身内容滚动时,而底层内容不滚动。

<scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
    底部内容
</scroll-view>
<view class="pop"></view>


/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
    /*获取屏幕高度*/
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight
    })
 },

3、固定定位(可以解决背景不要滚动,弹框能滚动的问题)

当出现弹窗时,为wxml最外层元素动态添加fixed类。

但是这种方式会导致页面自动回到顶部。

.pop.fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

文章来源地址https://www.toymoban.com/news/detail-486206.html

到了这里,关于解决小程序自定义弹窗滚动穿透问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app小程序 解决滚动穿透之page-meta

    页面是可以滚动的,该页面的弹窗、组件也是可以滑动的。 当我们滑动页面内弹出的弹窗、组件时,该页面也会跟着滚动,就会出现滚动弹窗内容时,页面内容也跟着滚动,这就是滚动穿透。 在PC端我们常通过给弹出弹窗的页面的body添加 overflow: hidden ,隐藏未显示的内容,

    2024年02月10日
    浏览(31)
  • uni-app弹窗列表滚动, 弹框下面的内容也跟随滚动解决方案

    滑动弹窗里的列表,弹框下面的内容也会跟着滑动,导致弹窗中的列表不能正常滚动 1.弹窗组件代码,需要在最外层的view中加入@touchmove.stop.prevent=\\\"moveHandle\\\",且弹窗中需要滚动的列表要使用scroll-view标签包裹起来,且scroll-y 属性不能忘记加。  

    2024年02月12日
    浏览(34)
  • 微信小程序基本使用2:wxs,组件的使用以及弹窗、滚动条

    WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML ,可以构建出页面的结构。 可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。 wsx 在IOS设备上性能是JavaScript的2-20倍 内嵌式 module=“属性值” 关联式 在utils下创建文件tools.wxs 在wxs文件中直接写方法,最后通过

    2024年02月02日
    浏览(39)
  • uniapp 微信小程序最新隐私弹窗更新方案,更新后无法登录问题解决方案

    uni-popup ref=\\\"popusAuthorization\\\" type=\\\"center\\\" :maskClick=\\\"false\\\" view class=\\\"contentview\\\" view class=\\\"title\\\"隐私保护指引/view view class=\\\"des\\\" @click=\\\"openPrivacyContract\\\" 在使用当前小程序服务之前,请仔细阅读text style=\\\"color: #07c160;\\\"{{privacyContractName}}/text。如你同意{{privacyContractName}},请点击“同意”开始使

    2024年02月09日
    浏览(29)
  • 解决小程序和app滚动条的问题--uniapp踩坑

    这是uniapp官方提供的: 属性名 类型 默认值 说明 平台差异说明 show-scrollbar Boolean false 控制是否出现滚动条 App-nvue 2.1.5+ 问题: 小程序和APP都是用使用scroll-view标签,代码相同,但是效果不同,就觉得很离谱,出现了两类情况,有种两权分立的感觉哈,下面是四种测试情况:

    2023年04月08日
    浏览(22)
  • uniapp 开发微信小程序 样式穿透问题解决

    微信文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB 问题:父组件中修改子组件 /deep/ H5中生效,但是在微信小程序不生效。 解决:在script中添加styleIsolation: ‘shared’,即可解决 如图:

    2024年02月12日
    浏览(32)
  • 小程序禁止滚动穿透,page-meta

    使用场景:页面中有弹窗,并且弹窗里数据超过弹窗的高,要在弹窗做滑动操作,当弹窗滑动到底部的时候,继续划动会导致底层页面的滚动,这就是滚动穿透。这种情况对于体验感很不友好。 解决办法:使用page-meta。截下官方的图 如果把page-meta放在view里的话,会提示一个

    2024年02月04日
    浏览(37)
  • 页面的滚动及scrollIntoView的穿透效果和解决

    朋友今天遇到一个奇怪的问题,我觉得很有意思就记录一下。现象是这样的,页面有一个按钮,点击按钮以后会请求一个接口拿到一个iframe的地址然后创建一个iframe并渲染到页面上,iframe的页面加载完毕后会滑动到对应的某一个元素的位置,本来滑动是没问题的,但是父页面

    2024年02月13日
    浏览(25)
  • 微信小程序|自定义弹窗组件

    2024年02月12日
    浏览(25)
  • uniapp微信小程序自定义弹窗组件

    写一个能够复用的弹窗组件,内容包括: \\\"标题\\\",\\\"图片\\\",\\\"描述内容\\\",\\\"按钮\\\". 且按钮可能会有多中功能(比如: 点击按钮可能只是关闭弹窗,或者关闭弹窗并跳转) 1.创建弹窗组件 popup-view 1.小编这里考虑组件全局都有可能会用到,就在主包的 components 文件夹下创建popup-view组件 2.组件内

    2024年02月04日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包