uniApp禁止遮罩弹窗下的页面滚动

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


问题

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

@catchtouchmove="moveHandle"
亲有效,但不太理想,会导致弹窗和底层页面都不能滚动,或者处理不当就报一些其他错误,还是不太简便


解决

其实问题的根源是浏览器的滚动穿透问题,目前还没有根本性办法解决,但可以在弹窗遮罩出来时给最外层容器设置高度来解决,亲测这个办法还是比较完美。
弹出遮罩时动态设置页面最外层容器style属性的height值为100vh。 这里最好使用单位vh100vh表示整个屏幕的高度,因为页面没有超出一屏,所以在弹窗上滑动时便不会触发底层的滚动事件,自然不会再有滚动穿透的问题。
此做法需要自定义列表滚动容器,也不是个很好的办法,表示无解
文章来源地址https://www.toymoban.com/news/detail-620729.html


代码

<template>
	<view class="container" :style="showMsk ? 'height: 100vh' : ''">
		<!-- 滚动列表 -->
		<scroll-view scroll-y="true"></scroll-view>
		<!-- 自定义弹窗 -->
		<view v-if="showMsk" class="msk"></view>
		<!-- 自定义弹窗 -->
		<!-- <view v-if="showMsk" class="msk" @touchmove.stop.prevent="moveHandle"></view> -->
	</view>
<template>

data() {
	return {
		showMsk: false,
	};
},
methods: {
	moveHandle: {
		return false;
	}
}

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

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

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

相关文章

  • 【uniapp 配置启动页面隐私弹窗】

    原因 根据工业和信息化部关于开展APP侵害用户权益专项整治要求,App提交到应用市场必须满足以下条件: 1.应用启动运行时需弹出隐私政策协议,说明应用采集用户数据 2.应用不能强制要求用户授予权限,即不能“不给权限不让用” 如不希望应用启动时申请“读写手机存储

    2024年02月11日
    浏览(37)
  • uniapp 获取手机定位权限及禁止拒绝后跳转设置页面

    问题:获取手机定位权限,在用户点击拒绝后,再次点击定位按钮,手机无反应。这里,安卓系统2次拒绝之后,默认为禁止询问弹窗弹出,所以再点击定位肯定没有反应。 一、解决思路:第一想到,检查是否打开GPS功能(Android),打开了直接跳转到地图定位页面,关闭状态

    2024年02月03日
    浏览(50)
  • uniapp 滚动页面到指定位置

    小程序业务中,通常会有用户点击某个按钮或者tab标签,然后页面滚动到相连内容位置 this.scrollTop = res.top;  这么写是因为我用了scroll-view   一般写法

    2024年02月12日
    浏览(41)
  • uniapp将页面滚动到目标位置

    这里分享其中两种方式,仅供参考~ 方式一:使用 pageScrollTo 方式二:使用 scroll-view 注意: 如果页面需要 下拉刷新 交互,此方式不适合。详情请看

    2024年02月11日
    浏览(81)
  • uniapp 小程序 全局弹窗 每个需要使用的页面都不用再引用

    使用全局组件,先声明全局组件 与普通的组件声明不同之处在于 1:目录形式 2:声明引用方式 在components目录中创建组件目录/组件vue,如下 注意需要同名的目录 } show函数是组件的methods中的声明的函数 这种方式的可以在页面中直接调用组件的函数,不用再在页面中引用组件

    2024年02月03日
    浏览(46)
  • uniapp中页面滚动锚点位置及滚动到对应高度显示对应按钮

    可以把页面代码和组件代码放自己项目里跑一下 页面代码 吸顶按钮组件代码

    2024年04月11日
    浏览(34)
  • 监听uniapp小程序页面滚动到底部实现数据加载

    使用微信小程序自带的生命周期事件:onReachBottom,可以监听到页面滚动到底部的时候。 修改获取数据的分页页数,配和uniapp组件加载更多,就可以实现下拉加载刷新的过程。 下面是示例 1.在data中初始化分页的页数  2.在监听到页面滚动到底部时,修改页数,调用获取数组的

    2024年02月12日
    浏览(36)
  • uniapp开发小程序,通过缓存的方式,判断页面只弹出一次弹窗通知

    在使用uniapp开发小程序时,在【个人中心页面】-点击【我的推广】按钮进入详情页面时,要求出现【会员协议通知】的弹窗,并且有【确认和取消】两个按钮, 如果点了【取消】按钮,直接退出该页面,并且下次进入该详情时,弹窗会再次弹出; 只有点了【确认】按钮,弹

    2024年04月17日
    浏览(41)
  • uniapp 微信小程ios端键盘弹起后导致页面无法滚动

    新增页面 用户可以主动添加输入文本框 添加多了就会导致当前页面出现滚动条,这就导致ios端滚动页面的时候去点击输入框键盘抬起再关闭的时候去滚动页面发现页面滚动不了(偶尔出现),经过多次测试发现是键盘抬起的时候 主动向上滑动 100%出现这种问题 这次项目主要使用了

    2024年02月05日
    浏览(50)
  • uniapp中页面和scrollview两种滚动到顶部原来这么优雅

    页面 scrollview

    2024年02月16日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包