当前位置：网站首页>当uniapp遇上滚动穿透，巧妙的解决方式~

当uniapp遇上滚动穿透，巧妙的解决方式~

2022-04-21 09:28:00 【一粒程序米】

上一次遇上这个滚动穿透，我是暴力解决的，当uniapp遇上可恶的滚动穿透的时候，我是怎么暴力解决的，今天学会了一个巧妙的方式，几行代码，超级方便好用，爱了爱了…

就是利用page-meta标签的page-style属性！

page-meta 的page-style属性相当于HTML的body属性，这个点很重要，之前我想要通过body{overflow:hidden;}的方式动态修改overflow的属性去停止页面的滚动，但是那时不知道怎么动态修改body的属性，而且如果使用document的方式去修改body的属性，在移动端真机会报错，拿不到body，真的很头疼，直到让我发现了page-style，实在是太好用了！！！

具体的解决方式：

<template >
	<view class="" >
		<page-meta :page-style="spanStyle"></page-meta>
	</view>
</template>
<script >
	export default {
    
		data() {
    
			return {
    
				spanStyle:"position:auto"
			}
		},
		methods: {
    
			mask(data){
    
				//当蒙层弹起时，固定界面禁止滚动，当蒙层关闭时，允许滚动
				if(data){
    
					this.spanStyle="position:fixed";
				}else{
    
					this.spanStyle="position:auto";
				}
			}
		}
	}
</script>

这方法爱了爱了…
也许是我懂得太少了，加油鸭！

版权声明
本文为[一粒程序米]所创，转载请带上原文链接，感谢
https://wangjinchan.blog.csdn.net/article/details/124265267

边栏推荐

猜你喜欢

随机推荐