uniapp uni-popup组件在微信小程序中滚动穿透问题

起因

在微信小程序中使用uni-popup组件时,出现滚动穿透,并且uni-popup内部内容不会滚动问题。

解决

滚动穿透

查阅官方文档,发现滚动穿透是由于平台差异性造成的,具体解决可以参照文档禁止滚动穿透

javascript 复制代码
<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="container">
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
		<!-- ... -->
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false
			}
		},
		methods: {
			change(e) {
				this.show = e.show
			}
		}
	}
</script>

内部滚动

内部滚动解决方式比较简单,在uni-popup里面加上一个scroll-view组件,并设置scroll-y属性为true就好。其他优化如下:

  • 将uni-popup组件的padding设置为0,是为了让滚动条出现在边上,而不是内部
  • scroll-view里面的view设置一个高度,是为了防止超出状态栏
javascript 复制代码
<uni-popup ref="execPopup" background-color="#fff" @change="changePopup" style="padding: 0;">
    <scroll-view :scroll-y="true">
        <view class="popup_box" style="height: calc(100vh - 80px);padding: 20px;">
        </view>
    </scroll-view>		
</uni-popup>
相关推荐
ReturnTrue8682 分钟前
nginx性能优化之Gzip
前端
w_y_fan1 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇1 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手1 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码1 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码1 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗1 小时前
VS Code 中手动和直接运行TS代码
前端
小高0071 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
Samsong1 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript