解决思路就是给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>