在开发vue项目我用到了mint-ui框架,使用picker组件在手机上滑动的时候,body页面也跟着一起滑动
解决的思路: 就是弹出层打开时禁止body的滚动事件,弹出层关闭时恢复body的滚动事件,通过监听popupGender变量,在弹窗出现后禁止body节点touchMove事件
<mt-popup v-model="popupGender" position="bottom">
<mt-picker :slots="gender" showToolbar value-key="sex" :itemHeight='60' @change="onGenderChange">
<div class="picker-btn flex-bet">
<div class="cancel" @click="genderCancel">取消</div>
<div class="determine" @click="genderDetermine">确定</div>
</div>
</mt-picker>
</mt-popup>
//Vue数据变量区域
data(){
/*---------监听函数--------------*/
handler: function(e){
e.preventDefault()
}
},
//Vue函数方法区域
methods:{
/*解决页面层级相互影响滑动的问题*/
closeTouch () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
},
openTouch () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
}
}
在打开窗口时调用closeTouch方法,关闭弹出窗口时调用openTouch方法
//侦听属性
watch: {
//关闭没有回调函数,所以侦听该属性替代
popupGender(val){
if(val) {
this.closeTouch()
} else {
this.openTouch()
}
}
}
这样就解决了使用picker时穿透滚动的问题。
但是datetime picker呢,datetime picker不能监听属性判断窗口是否关闭,没有这个属性暴露出来
//防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了,native是关键,这个表示根元素的意思,也就是body或者html
<mt-datetime-picker
ref="picker"
type="time"
v-model="pickerValue"
@touchmove.native.stop.prevent>
</mt-datetime-picker>
<mt-popup
v-model="popupVisible"
position="bottom"
@touchmove.native.stop.prevent>
...
</mt-popup>
注意: 当mt-popup中还有div等子元素的时候,一定要注意,这个时候可能会有一些问题,会出现mt-popup这个元素也滚动不了的情况,所以说如果mt-popup本身不需要滚动的话,加了@touchmove.native.stop.prevent,底部页面就不会跟着滑动,如果mt-popup里面有滚动条需要滚动的话,可能就滚动不了