Vue中使用mint-ui的日期外掛時在ios上會有滾動穿透問題
阿新 • • 發佈:2018-11-03
問題:在ios上選擇日期上下滑動時,整個頁面會跟著滾動,安卓是正常的
解決方法就是在日期彈出層出現的時候禁止頁面的預設滾動機制,日期彈出層消失的時候解除禁止頁面的預設滾動機制
1.呼叫日期元件
<div class="datePicker" style="z-index: 9999"> <mt-datetime-picker type="date" ref="picker" v-model="nowTime" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" :startDate="startDate" :endDate="endDate" > </mt-datetime-picker> </div>
2.設定監聽函式
data () { return { birthday:"", //出生日期 startDate: new Date('1952'), endDate:new Date(), nowTime:'1992-09-15', /*---------監聽函式--------------*/ handler:function(e){e.preventDefault();} } }, methods:{ /*解決iphone頁面層級相互影響滑動的問題*/ closeTouch:function(){ document.getElementsByTagName("body")[0].addEventListener('touchmove', this.handler,{passive:false});//阻止預設事件 console.log("closeTouch haved happened."); }, openTouch:function(){ document.getElementsByTagName("body")[0].removeEventListener('touchmove', this.handler,{passive:false});//開啟預設事件 console.log("openTouch haved happened."); }, }
然後監聽,彈窗出現消失的時候呼叫相應的方法
//偵聽屬性
watch:{
signReasonVisible:function(newvs,oldvs){//picker關閉沒有回撥函式,所以偵聽該屬性替代
if(newvs){
this.closeTouch();
}else{
this.openTouch();
}
}
},
以下為datetime-picker的處理:(openPicker1為觸發開啟選擇器的事件, handleConfirm (data)是選中日期後的回撥函式)
openPicker () {
this.$refs.picker.open();
this.closeTouch();//關閉預設事件
},
handleConfirm (data) {
let date = moment(data).format('YYYY-MM-DD')
this.birthday = date;
this.openTouch();//開啟預設事件
},
然後就解決了這個問題