解决思路就是给body中添加样式,控制其内容溢出裁剪,不滚动,即overflow:hidden
具体步骤:
- 新建
utils/isScroll.js
,Vue
原型上添加禁止滚动和恢复滚动的方法
import Vue from "vue";
// 禁止滚动
Vue.prototype.noScroll = function () {
document.body.style.overflow = "hidden";
};
// 追加滚动
Vue.prototype.canScroll = function () {
document.body.style.overflow = "";
};
main.js
引入utils
工具方法文件
import "./utils/isScroll";
- 模板
template
中使用
<view
@tap="
() => {
show = true;
noScroll();
}
"
>
点击弹出弹出层
</view>
<u-popup
:show="show"
mode="right"
@close="
() => {
show = false;
canScroll();
}
"
closeable
>
<view>...内容</view
</u-popup>
methods
中使用
<view @tap="open">
点击弹出弹出层
</view>
// ...
<script>
methods: {
open(){
this.show = true
this.noScroll()
}
}
</script>
<u-popup
:show="show"
mode="right"
@close="close"
closeable
>
<view>...内容</view
</u-popup>
// ...
<script>
methods: {
close(){
this.show = false
this.canScroll()
}
}
</script>