解决微信小程序页面滚动穿透问题

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

先来描述一下具体什么是滚动穿透行为,假设现在有一个长列表,可以上下滚动查看更多内容,假如我们点击一个删除按钮,会弹出一个确认弹框,这时我们如果上下滑动页面的话会发现弹框底下的列表内容依然可以上下滚动,如下所示:

微信小程序怎么让change事件不透传,小程序问题和总结,微信小程序,小程序

Video_2022-12-02_111109

这样的体验效果并不是很好,按理来说当弹框显示的时候,底下的列表页面不能再滚动了,要解决这样的问题其实也很容易
在对应页面的**wxml文件的首行**添加如下代码:

<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />

当弹框显示的时候把show设置为true则禁止滚动穿透,当关闭弹框时把show设置为false,则页面可以滚动

Page({
	 data: {
		show: false
	},
	// 弹框打开禁止页面滚动穿透
	handleDialogOpen() {
	    this.setData({
	      show: true
	    })
	 }// 弹框关闭允许页面滚动
	 handleDialogClose() {
	    this.setData({
	      show: false
	    })
	  }
})

O了,就这么点代码,亲身试验有效!如果能解决你的问题还望点个赞哦,祝你生活愉快!文章来源地址https://www.toymoban.com/news/detail-536163.html

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

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

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

相关文章

  • 微信小程序的页面滚动事件监听

    微信小程序中可以通过 Page 的 onPageScroll 方法来监听页面滚动事件。具体步骤如下: 在页面的 onLoad 方法中注册页面滚动事件监听器: 在 onPageScroll 方法中处理页面滚动事件。onPageScroll 方法会在页面滚动时被调用,参数 event 包含了当前页面滚动的位置信息,例如 event.scrollT

    2024年02月07日
    浏览(49)
  • 微信小程序 顶部搜索 吸顶 不随页面滚动而滚动

    主要用于商城类小程序: 微信小程序 搜索框 顶部吸顶 顶部购物车栏固定 不随页面滚动而滚动 示例: 可以看到分为三部分--头部搜索框--中间商品区域(可滚动)----底部购物车(固定底部) 头部搜索框 最大的盒子宽高100% 头部盒子需要有固定高度 flex布局 flex-flow: column; (为了中间

    2024年02月12日
    浏览(56)
  • 【微信小程序点击滚动页面到指定位置】

    scroll-view :https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 补充: 1: scroll-view设置高度:style=“height:100%” 2: scroll-view设置纵向滚动:scroll-y=“true” 3: scroll-view设置要去的id( 这个必须动态设置才生效 ):scroll-into-view=“{{toView}}”

    2024年02月09日
    浏览(38)
  • 小程序 解决自定义弹窗滚动穿透问题,解决弹窗背景内容滚动问题

    方法一、catchtouchmove=\\\"true\\\", 可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动,如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。 view class=\\\"pop\\\" catchtouchmove=\\\"true\\\"     view class=\\\"content\\\"/view /view 方法二、固定定位(可以解决背景不要滚动,弹框能滚动的问题)

    2024年02月03日
    浏览(36)
  • 解决小程序自定义弹窗滚动穿透问题

    在小程序页面里有自定义弹窗时候,希望弹框里的scroll-view可以动,底部背景页面不要动 可以实现弹框背景不滚动,但是 也会导致弹框自身无法滚动 。 如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。 设置 scroll-view 垂直滚动, 并将scroll-view的高度设置为屏幕高度

    2024年02月09日
    浏览(45)
  • 微信小程序自定义顶部导航,滚动页面顶部导航颜色渐变

    微信小程序自定义顶部导航栏,使背景图置顶;当向上滚动页面时,实现顶部导航颜色渐变 实现方法 代码如下(示例): 提示:由于不同的手机机型顶部导航高度不一样,所有要获取手机的信息 总共三步: 1、初始化获取顶部导航信息 2、顶部导航文字上方通过view占位,同

    2024年02月11日
    浏览(55)
  • 微信小程序弹出层弹出后禁止页面滚动

    1.用一个view标签把页面禁止滚动部分包裹,并添加自定义类名 初始值为空 2. 在弹出层打开是,改变变量的值 3.给isNoRoll设置样式

    2024年02月08日
    浏览(90)
  • 解决微信小程序自定义tabbar跳转页面图标闪动问题

    情况一    如果你的tabbar对应的页面是component,那就在component下面加上 其中的selected是该tab页面对应的索引值 情况二    如果你的tabbar对应的页面是page,那就将上面的if判断写在page的onshow里面 闪动问题就解决啦~

    2024年02月12日
    浏览(62)
  • 微信小程序多图列表页面性能问题为什么会出现?如何解决?

    微信小程序中的多图列表页面性能问题主要是由于以下几个原因导致的: 图片过大:在多图列表页面中,如果图片过大,会导致页面加载时间过长,从而影响用户体验。 请求过多:在多图列表页面中,如果一次请求加载过多的图片,会导致请求次数过多,从而影响页面加载

    2024年03月25日
    浏览(63)
  • uniapp微信小程序 页面返回使用navigateBack,返回后页面不刷新问题解决方案

    尝试了众多方法,比如vuex,本地缓存,都不行 1,如果是页面之间的跳转 可以使用onShow生命周期请求数据 2,组件之间的跳转,使用redirectTo,通过关闭当前页面,跳转到指定页面再加载,这种适合二级页面到三级页面数据不更新问题 3,当一级页面使用了某个组件,组件内跳转

    2024年02月15日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包