解决思路就是给body中添加样式,控制其内容溢出裁剪,不滚动,即overflow:hidden
具体步骤:
- 新建
utils/isScroll.js
,Vue
原型上添加禁止滚动和恢复滚动的方法
js
import Vue from "vue";
// 禁止滚动
Vue.prototype.noScroll = function () {
document.body.style.overflow = "hidden";
};
// 追加滚动
Vue.prototype.canScroll = function () {
document.body.style.overflow = "";
};
main.js
引入utils
工具方法文件
js
import "./utils/isScroll";
-
模板
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>
- 当打开
-
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>
- 当打开