1 v-show显示模态框
2 watch 监听模态框 的变化
watch:{
isHidden(newVal){
newVal?this.scrollStop():this.scrollStart()
}
}
3 在isHidden值发生变化的时候,
a 阻止浏览器的默认行为,同时禁止页面滚动
scrollStop(){
var m = function(e){
e.preventDefault()
}
document.body.style.overflow = ‘hidden’
document.addEventListener(‘touchmove’,m,false) //禁止页面滑动
},
b 在 isHidden 模态框 关闭的时候,让页面出现滚动条
scrollStart(){
var m = function(e){
e.preventDefault()
}
document.body.style.overflow = ‘’
document.addEventListener(‘touchmove’,m,false)//出现滚动条
},
//在安卓手机上测试后发现不行,还是出现滚动穿透问题
解决:
scrollStop(){
var m = function(e){
e.preventDefault()
}
//换成以下代码
document.documentElement.style.position = ‘fixed’;
document.body.style.overflow = ‘hidden’; //隐藏滚动条
},
scrollStart(){
var m = function(e){
e.preventDefault()
}
//换成以下代码
document.documentElement.style.position = ‘static’;
document.body.style.overflow = ‘’; //出现滚动条
},