1. ポップアップ ボックスのあるページに次のメソッドを追加します。ポップアップ ボックスが表示されたら、メソッド stopScroll() を呼び出してスクロールを禁止します。ポップアップ ボックスを削除するには、メソッド canScroll() を呼び出します。スクロールを許可します。コードは次のとおりです。
methods : {
//禁止滚动
stopScroll(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
/***取消滑动限制***/
canScroll(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,false);
}
}
2. グローバル js (main.js) でグローバル関数を設定し、使用するページで呼び出します。コードは次のとおりです。
//弹出框禁止滑动
Vue.prototype.stopScroll = function () {
var mo = function (e) { e.preventDefault() }
document.body.style.overflow = 'hidden'
document.addEventListener('touchmove', mo, false)// 禁止页面滑动
}
//弹出框可以滑动
Vue.prototype.canScroll = function () {
var mo = function (e) {
e.preventDefault()
}
document.body.style.overflow = ''// 出现滚动条
document.removeEventListener('touchmove', mo, false)
}
3. 特定ページの呼び出し方法は以下のとおりです。
//当需要禁止弹出框底部内容滑动时调用:
this.stopScroll()
//当需要页面恢复滑动功能时调用:
this.canScroll()