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();//打开默认事件

          },

然后就解决了这个问题

 

祝工作顺利，身体健康