uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题

简介: uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题

问题背景:


使用uniapp或者uview组件时,涉及到遮罩层的出现,一般会随之出现一个问题,就是当长按出现遮罩层时,此时不松手,往下滑动屏幕,还是会触发当前页面所涉及到的页面滚动甚至下拉刷新事件. 看了下各种博客人云亦云. 我找到一个很简单的方法


分析


首先,这个情况是什么时候会出现? 遮罩层出现的时候会出现,那么,我们就可以监听控制遮罩层或者包含遮罩层的那个组件的flag变量. 当遮罩层显示的时候,让当前页面的overflow变成hideen,在遮罩层隐藏的时候,设置当前页面的overflow为’'. 设置了overflow为hidden,页面滚动条都没了,我看你怎么滚动.


上代码


watch: {
    showupsheet(val){
        if(val){
        //遮罩层显示
          document.body.style.overflow = 'hidden';
        }else{
          document.body.style.overflow = '';
        }
      }
    },

效果

完美解决!


相关文章
|
4天前
|
资源调度
uniapp引入vant组件库
uniapp引入vant组件库
23 11
|
5天前
|
移动开发 小程序 API
uniapp中组件库Mask 遮罩层 的使用方法
uniapp中组件库Mask 遮罩层 的使用方法
10 1
|
5天前
|
移动开发 小程序 API
uniapp组件库Card 卡片 的使用方法
uniapp组件库Card 卡片 的使用方法
11 1
|
5天前
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
11 0
|
5天前
|
移动开发 小程序 iOS开发
uniapp组件库fullScreen 压窗屏的适用方法
uniapp组件库fullScreen 压窗屏的适用方法
13 1
|
5天前
|
移动开发 小程序 API
uniapp组件库Modal 模态框 的使用方法
uniapp组件库Modal 模态框 的使用方法
12 1
|
5天前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
13 1
|
5天前
|
移动开发 小程序 API
uniapp组件库Popup 弹出层 的使用方法
uniapp组件库Popup 弹出层 的使用方法
12 1
|
5天前
|
移动开发 小程序 API
uniapp组件库中Collapse 折叠面板 的使用方法
uniapp组件库中Collapse 折叠面板 的使用方法
12 1
|
5天前
|
移动开发 小程序 API
uniapp中uview组件库TopTips 顶部提示使用方法
uniapp中uview组件库TopTips 顶部提示使用方法
11 1

热门文章

最新文章