移動端點透事件--阻止滾動事件

洲哥發表於2018-07-10

移動端模態框滾屏事件的解決方法

1 原生寫法是:

    function mo(event) {
        event.preventDefault();
    }
    
    function stop() {
        document.body.style.overflow = 'hidden';
        doucment.addEventListener('touchmove', mo, {passive: false});
    }
    
    function move() {
        document.body.style.overflow = 'auto';
        doucment.removeEventListener('touchmove', mo, {passive: false});
    }
複製程式碼

2.vue的寫法

外面再套一層div,加上touchmove.prevent

 @touchmove.prevent
複製程式碼

mint-ui

<mt-datetime-picker>

<div @touchmove.prevent> 
    <mt-datetime-picker v-model="pickerValue" type="date" ref="picker" @confirm="handleConfirm" :start-date="startDate" :end-date="endDate" year-format="{value}" month-format="{value}" date-format="{value}"> </mt-datetime-picker> 
</div>
複製程式碼

相關文章