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>
相关推荐
xiaopengbc8 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君13 分钟前
React中台系统如何嵌入到业务系统中
前端
Slice_cy15 分钟前
不定高虚拟列表
前端
前端AK君24 分钟前
React组件库如何在vue项目中使用
前端
Moonbit33 分钟前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud36 分钟前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构
li35741 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
菜市口的跳脚长颌1 小时前
Web3 基础
前端
快乐是Happy1 小时前
分享一个非常实用的防止重复提交操作
前端·javascript
王蛋1111 小时前
前端工作问题或知识记录
前端·npm·node.js