1. 程式人生 > >Vue中使用mint-ui的日期外掛時在ios上會有滾動穿透問題

Vue中使用mint-ui的日期外掛時在ios上會有滾動穿透問題

問題:在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();//開啟預設事件

          },

然後就解決了這個問題