zoukankan html css js c++ java

如何给移动端页面设置遮罩后，禁止页面滚动

我们都知道如果给某页面设置了遮罩后，该页面还是会触发滚动效果的，代码如下：

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          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>

查看全文

相关阅读:
最长回文子串 V2（Manacher算法）
用例建模Use Case Modeling
分析一套源代码的代码规范和风格并讨论如何改进优化代码
 结合工程实践选题调研分析同类软件产品
 如何提高程序员的键盘使用效率
 antd移动端onClick事件点击无效
 webpack打包问题
 centos下部署项目问题
 javascript return 跟 break区别
 VUE清除组件内部定时器

原文地址：https://www.cnblogs.com/heisetianshi/p/14789676.html