如何给移动端页面设置遮罩后，禁止页面滚动
我们都知道如果给某页面设置了遮罩后，该页面还是会触发滚动效果的，代码如下：
1 <view class="maske"></view>
1 .maske { 2 width: 100%; 3 height: 100vh; 4 background-color: #007AFF; 5 opacity: 0.5; 6 z-index: 99; 7 position: fixed; 8 top: 0; 9 left: 0; 10 }
那 现在我们不想让页面滚动，应该怎么办呢？
（1）可以通过css解决
找到项目中写公共样式的地方，加上以下代码：
1 <style> 2 /*每个页面公共css */ 3 body,html,page{ 4 overflow: hidden; 5 } 6 </style>
（2）当然可以用阻止默认行为的方法解决
1 <template> 2 <view class="content"> 3 <view class="maske" @click.stop="moveHandle($event)"> 4 <view class=" ">这里将页面内容部分写在了遮罩层里</view> 5 <view>1</view> 6 <view>1</view> 7 <view>1</view> 8 <view>1</view> 9 <view>1</view> 10 <view>1</view> 11 <view>1</view> 12 <view>1</view> 13 <view>1</view> 14 <view>1</view> 15 <view>1</view> 16 <view>1</view> 17 <view>1</view> 18 <view>1</view> 19 <view>1</view> 20 <view>1</view> 21 <view>1</view> 22 <view>1</view> 23 <view>1</view> 24 <view>1</view> 25 <view>1</view> 26 <view>11</view> 27 <view>11</view> 28 <view>11</view> 29 <view>11</view> 30 <view>11</view> 31 <view>11</view> 32 <view>11</view> 33 <view>11</view> 34 </view> 35 </view> 36 </template> 37 38 <script> 39 export default { 40 components:{ 41 42 }, 43 data() { 44 return { 45 46 } 47 }, 48 onInit(){ 49 console.log("页面初始化") 50 }, 51 onLoad() { 52 console.log("页面加载") 53 }, 54 onShow() { 55 console.log("页面显示，每次显示时都会触发") 56 }, 57 onReady() { 58 console.log("页面初次渲染完成") 59 }, 60 onHide(){ 61 console.log("页面隐藏") 62 }, 63 onUnload(){ 64 console.log("页面卸载") 65 }, 66 onResize(){ 67 console.log("页面尺寸变化") 68 }, 69 onPullDownRefresh() { 70 console.log("页面下拉刷新") 71 }, 72 onReachBottom() { 73 console.log("上拉加载新数据") 74 }, 75 onTabItemTap() { 76 console.log("触发底部导航") 77 }, 78 onShareAppMessage() { 79 console.log("右上角点击分享") 80 }, 81 onPageScroll() { 82 console.log("页面滚动") 83 }, 87 methods: { 88 moveHandle(e){ 89 e.preventDefault(); //阻止默认行为，但是遮罩层要写在页面所有内容最外层，否则方法无效。 90 } 91 } 92 } 93 </script> 94 95 <style> 96 .content { 97 display: flex; 98 flex-direction: column; 99 align-items: center; 100 justify-content: center; 101 overflow: hidden; 102 } 103 .maske { 104 width: 100%; 105 height: 100vh; 106 background-color: #007AFF; 107 opacity: 0.5; 108 z-index: 99; 109 position: fixed; 110 top: 0; 111 left: 0; 112 } 113 114 </style>
