Summary of problems ​

Table of contents ​

• [1.Disable scrolling label](#disable scrolling label)

No skateboarding allowed ​

When using popup layer components such as wu-popup, you will find that the content under the mask can be scrolled, which is the scrolling layer.

However, due to the platform itself, except for the h5 platform, other platforms cannot prohibit rolling bearings in components. Therefore, in WeChat mini programs and App platforms, users need to handle it specially on the page.

####WeChat Mini Program/App On the WeChat Mini Program/App platform, you can use the page-meta component to dynamically modify the page style.

Taking wu-popup as an example, define a variable in data to represent the opening and closing status of wu-popup, and use the overflow attribute of page-meta of the variable.

In the change event of wu-popup, you can receive the opening and closing status of wu-popup and assign values ​​to the variables in data.

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

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

Tips ​

• h5 scroll penetration does not need to be processed, there is h5 processing inside the component
• wx and app need to use the page-meta component to prevent scroll penetration
• Note that page-meta component, only one can exist on a page
• Other platforms cannot prevent scroll penetration. It is recommended to use scroll-view for scrolling and manually set overflow:hidden, which is the same as the page-meta method.