vue2解决uniapp使用uview的u-popup弹出层,遮罩下主页面还可以滑动问题

解决思路就是给body中添加样式,控制其内容溢出裁剪,不滚动,即overflow:hidden
具体步骤:
  1. 新建utils/isScroll.jsVue原型上添加禁止滚动和恢复滚动的方法
js 复制代码
import Vue from "vue";

// 禁止滚动
Vue.prototype.noScroll = function () {
  document.body.style.overflow = "hidden";
};

// 追加滚动
Vue.prototype.canScroll = function () {
  document.body.style.overflow = "";
};
  1. main.js引入utils工具方法文件
js 复制代码
import "./utils/isScroll";
  1. 模板template中使用

    • 当打开popup弹出层时:
    js 复制代码
    	<view
        	@tap="
            	() => {
                	show = true;
                	noScroll();
                }
            "
        	>
        	点击弹出弹出层
    	</view>
    • 当关闭popup弹出层时:
    js 复制代码
    <u-popup
    	:show="show"
    	mode="right"
    	@close="
    		() => {
    			show = false;
    			canScroll();
    		}
    	"
    closeable
    >
    	<view>...内容</view
    </u-popup>
  2. methods中使用

    • 当打开popup弹出层时:
    js 复制代码
    <view @tap="open">
    	点击弹出弹出层
    </view>
    	// ...
    <script>
    	methods: {
    		open(){
    			this.show = true
    			this.noScroll()
    		}
    	}
    </script>
    • 当关闭popup弹出层时:
    js 复制代码
    <u-popup
    	:show="show"
    	mode="right"
    	@close="close"
    	closeable
    >
    	<view>...内容</view
    </u-popup>
    // ...
    <script>
    	methods: {
    		close(){
    			this.show = false
    			this.canScroll()
    		}
    	}
    </script>
相关推荐
zhong liu bin7 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
zhangzuying102630 分钟前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
lichong95135 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
知识分享小能手1 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手7 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲7 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
前端工作日常10 小时前
我学习到的Vue2.6的prop修饰符
vue.js
小菜全10 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG10 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042711 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js