微信小程序滚动穿透问题

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


做小程序的开发业务中,经常会使用弹窗,当弹窗里的内容过多时,要滚动查看,然后经常会遇到滚动弹窗,弹窗底下页面也跟着滚。

解决思路:设置page组件的wxss样式, overflow动态设置hidden或者visible或者auto, 就可以控制整个页面是否可以滚动。


注:分享的方案只是一种解决思路,没有百分百有效的,可能有些人用着好使有些人不好使,可能还会有一些其他的问题,得根据具体得设备ios、安卓差别很大,css样式兼容,客户端版本、基础库版本、组件最低基础库限制等等,小程序就这尿性,所有问题必须在真机上测试,踩了不少开发者工具的坑。mmp!!!


1、catchtouchmove=“true”

catchtouchmove相当于preventDefault,是阻止页面滚动的

注: 适用于简单的业务,适用view布局的元素

2、page-meta

页面属性配置节点,用于指定页面的一些属性、监听页面事件。

page-meta地址

3、wx.setPageStyle

这个api,官方文档没有,不一定好使,可以试试,不行的话再换其他方案。文章来源地址https://www.toymoban.com/news/detail-505504.html

	wx.setPageStyle({
	   style: {
	     overflow: 'hidden'
	   }
	})

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

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

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

相关文章

  • uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题

    1.1 template 1.2 style(scss) 1.3 问题截图 2.1 解决办法 在 u-scroll-list 内部只放一个盒子,盒子内部包裹横向滚动列表项,并且盒子设置 display:flex; 2.2 template 2.3 style(scss) 2.4 解决截图

    2024年02月11日
    浏览(33)
  • 毕业设计做小程序可以做什么,基于微信小程序的毕业设计题目

    博主介绍 :《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(29)
  • 微信小程序--开发横向滚动条scroll-view

    一、话不多说,上代码 .wxml文件写法 css样式 js写法 二、解析  scroll-x=\\\"true\\\":表明是横向滚动 class=\\\"{{currentTab==index?\\\'scroll_item\\\':\\\'\\\'}}\\\":当点击时才会变色,其中currentTab的初始值是0,通过点击事件更改值

    2024年02月12日
    浏览(31)
  • Echarts微信小程序中条形图上下滑动引起页面滚动问题

    先看条形图 如图所示是,echarts中典型的横向柱状图(条形图) 需求:可以让图形进行放大缩小,并且放大后可上下滚动查看; 主要问题:放大图表之后,手指上下滑动会引起页面整体滚动,影响数据查看体验 PS:看了很多方案,有 直接修改源码 阻止touchstart、touchmove、to

    2024年04月17日
    浏览(44)
  • 处理微信小程序scroll-view未被占满时滚动的问题

    微信小程序(原生/uniapp)使用了 scroll-view 组件的第一个子元素设置了 margin-top 时,即使 scroll-view 只有一行也可以滚动。 解决办法: 方案一:

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

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

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

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

    2024年02月09日
    浏览(32)
  • 微信小程序蓝牙功能开发与问题记录

    一、蓝牙支持情况 1. 微信小程序对蓝牙的支持情况 目前普遍使用的蓝牙规格:经典蓝牙和蓝牙低功耗。 经典蓝牙 (蓝牙基础率/增强数据率):常用在对数据传输带宽有一定要求的大数据量传输场景上,比如需要传输音频数据的蓝牙音箱、蓝牙耳机等; 蓝牙低功耗  (Blue

    2024年02月09日
    浏览(37)
  • 微信小程序,竖向滚动公告

     view class=\\\"swiper_box\\\"           swiper                vertical=\\\"true\\\"               autoplay=\\\"true\\\"                circular=\\\"true\\\"               interval=\\\"3000\\\"               duration=\\\'300\\\'               easing-function=\\\'easeInOutCubic\\\'             

    2024年02月09日
    浏览(29)
  • 微信小程序实现滚动吸顶

    方法一:position:sticky简单粗暴,但存在部分机型不支持 1.position:sticky( position: -webkit-sticky): 类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。 eg:

    2024年02月13日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包