阻止uni-popup弹出框显示后，遮罩层下方内容滚动问题

青田。

已于 2023-04-25 15:24:00 修改

阅读量579

点赞数

分类专栏： uniapp 文章标签： uni-app

于 2023-04-25 15:22:27 首次发布

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/130365866

版权

uniapp 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

文章描述了一个在使用uni-popup组件创建弹出框时遇到的问题，即当弹出框打开后，页面内容在遮罩层下仍然可以滚动。作者提供了模板代码示例，其中包括使用vue的数据绑定和方法来控制页面overflow属性，以及uni-popup的事件监听来更新状态。问题的核心在于阻止背景页面滚动，而只允许弹出框内的内容可滚动。

摘要由CSDN通过智能技术生成

问题：弹出框打开后，滑动页面遮罩层下方内容也会滚动

<template>
	<page-meta :page-style="'overflow:'+(isShow?'hidden':'visible')"></page-meta>
	<view class="index-container">
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popupRef" type="center" @change="change">
			<view style="width: 300px; height: 300px;background-color: aqua;">
				我是弹框内容
			</view>
		</uni-popup>
		<view class="" v-for="(item,index) in 200">{{index}}</view>
	</view>
</template>
<script>
	export default { 
		data() {
			return {
				isShow:false
			}
		},
		methods: {
			 open(){
				this.$refs.popupRef.open('center')
			  },
			  change(e) {
				  this.isShow = e.show
			  }
		}
	}
</script>