用vue指令解决ios滚动穿透问题

先说说什么事滚动穿透!

其实就是在页面上层有一个弹框,弹框里面可以滚动,底层也可以滚动 在某些ios版本下会导致上层(也就是下图中的时间选择部分)滑动到头,继续滑动,下层内容也被滑动了,这种情况我姑且称之为滑动穿透

解决办法!:
首先指令在这!

Vue.directive('lockScrollBack', {
  update: function (el, binding, vnode) {
    //这里用到lodash的"_"查看传进来的数组里面是否有为true的值 
    if (_.includes(binding.value, true)) {
      //如果有的话就阻止滚动
      el.addEventListener('touchmove', bodyScroll, false)
    } else {
      //没有的话就开放滚动
      el.removeEventListener('touchmove', bodyScroll, false)
    }
  },
});

 怎么用!

<div v-lockScrollBack="[datetimePickerIsShow]">
  内容很高很长  
  <!--并且这里有个类似mint-ui的mt-popup的东西(详情可以了解下mint-ui)-->
  <!--这种情况就会出现ios滑动穿透-->
  <mt-datetime-picker
    type="datetime"
    :startDate="enroll_time_start_date">
  </mt-datetime-picker>
</div>

思路!:主要思路是当有上层弹框的时候,告诉vue指令 我有弹框 你下面就不能滚动了

文章写的不好的地方大佬们指点
写作经验不多 可能排版也不好 请见谅 欢迎指教