vue picker阻止穿透滚动

朱雀 2023-06-28 08:53 9阅读 0赞

在开发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里面有滚动条需要滚动的话，可能就滚动不了