小程序禁止滚动穿透,page-meta

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

使用场景:页面中有弹窗,并且弹窗里数据超过弹窗的高,要在弹窗做滑动操作,当弹窗滑动到底部的时候,继续划动会导致底层页面的滚动,这就是滚动穿透。这种情况对于体验感很不友好。
解决办法:使用page-meta。截下官方的图
小程序禁止滚动穿透,page-meta,uniapp,微信小程序,小程序,uni-app

<template>
	<page-meta :page-style="'overflow:'+(maskShows?'hidden':'visible')"></page-meta>
	<view>
		。。。
	</view>
</template>

如果把page-meta放在view里的话,会提示一个错误
小程序禁止滚动穿透,page-meta,uniapp,微信小程序,小程序,uni-app
必须放在整个页面的template下面才行。maskShows是弹窗是否显示的字段,这样的话弹窗的滑动就不会影响到主页面了。文章来源地址https://www.toymoban.com/news/detail-757477.html

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

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

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

相关文章

  • 微信小程序 - 解决弹框遮罩层的滚动穿透问题

    在小程序页面里有自定义弹窗时候,发现弹窗外滚动的时候,底部背景页面也会跟随滚动。面对这个bug,我们可以用下面几种方法实现: 可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动。 如果你的 弹窗本身是不需要滚动的 ,用这个方法是极佳的。 ps:开发工具测

    2024年02月17日
    浏览(101)
  • uniapp微信小程序系列(2)pages.json实用配置详解

    本篇主要介绍其中几个实用的配置: 1. 配置应用级别样式、tabBar样式 2. 配置前端页面路由、分包路由 3. 配置easycom全局组件(组件无需import引入直接使用) 创建一个包含首页、我的两个tabBar模块的应用布局,配置参数如下: 详细配置功能,请参考配置后的注释 以下配置中

    2023年04月08日
    浏览(75)
  • uniapp 禁止遮罩层下的页面滚动

    使用 @touchmove.stop.prevent=\\\"toMoveHandle\\\" 事件修饰符 若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent=\\\"moveHandle\\\",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了,虽然在编译器上的滚轮依旧可以滚动,但真机环

    2024年02月11日
    浏览(48)
  • uniApp禁止遮罩弹窗下的页面滚动

    最近用 uniApp 开发一款软件,页面是可以滚动的长列表,自定义组件弹窗遮罩出来后,滑动屏幕,页面也跟着滚动。研究了网上的解决办法 在遮罩层的最外层的 view 元素中加入 @touchmove.stop.prevent=\\\"moveHandle\\\" 或 @catchtouchmove=\\\"moveHandle\\\" 亲有效,但不太理想,会导致弹窗和底层页面

    2024年02月14日
    浏览(49)
  • 【uniapp】禁止遮罩层下的页面滚动解决办法

    不少朋友在日常工作中都会遇到需要自定义弹窗的时候,当开启弹窗后,却发现存在弹窗下的页面依旧可以被触发滚动的问题,以下是相关的解决方法。 根据是否打开的弹窗状态,对最外层 view 设置 height 和 overflow: 这个方法通过对页面设置高度来限制底层页面滚动的问题,

    2024年02月07日
    浏览(54)
  • uniapp-微信小程序关于禁止ios自带的下拉上拉(橡皮筋回弹)

    先说出现的问题,如下图所示,下拉出现空白,上拉也会出现一段空白。 要求:这个页面不能拉动,并且保证 如果内容超出,可以正常滑动,内容不超出也禁止ios自带的拉动    解决办法:分两步 第一步 :在pages.json里添加这行代码,如下图所示, 但是 如果你的页面内容很

    2024年02月12日
    浏览(60)
  • uniapp-微信小程序实现swiper左右滚动切换tab,上下滚动加载列表

    思路:左右滑动使用swiper,上下滑动用scroll-view,swiper改变时同时改变tab并更新列表 坑点: 1. swiper高度问题,导致滑动不到最底部和最顶部         需要手动计算,减去顶部高度和底部tabbar,并且需要同时设置padding-top和paddin-botton,否则列表显示不完整 2. 由于最开始的代码

    2024年02月04日
    浏览(64)
  • uniapp运行到微信程序报错[ pages/**/index.json 文件内容错误] [“usingComponents“][“**“]未找到

    uni-app运行到小程序时报如下的错误 可以看出是自定义的组件create-formt对应的文件未找到。 1.查看组件对应的路径中文件是否存在,这里看到components文件夹中确实没有对应的文件; 2.在HBuilderX中查看项目中确定此组件文件存在。 3.清除微信开发者工具所有缓存,并在HBuilderX中

    2024年02月15日
    浏览(51)
  • uniapp微信小程序scroll-view滚动scrollLeft不准确

    今天在实现微信小程序的一个横向导航的时候出现了一个问题,就是每次滑到滚动条最右边的时候 scrollLeft的值都不准确 原因:因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流,可以在scroll-view 加一个 throttle=“{{false}}” 关闭节流,如下: 但是这种方法会影响

    2024年02月15日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包