解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题


Posted in Javascript onNovember 04, 2020

在移动端开发中使用到了Mint-ui组件库,其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题,官方文档最新版并没有解决这个问题。

现象还原

官方地址

手机扫码查看demo,查看两个组件Popup组件和Datetime的例子演示。

问题原因

HTML5触摸事件touchmove事件:当手指在屏幕上滑动的时候连续地触发

所以当激活出组件Popup组件和Datetime Picker的弹出层时,我们在弹层选择内容时上下连续滑动是会触发该事件

解决思路

在弹出层出现之后阻止body的touchmove事件,在弹层消失之后移除阻止事件

使用mint-ui组件库的解决方式

Popup组件

// 官方实例

<mt-popup
 v-model="popupVisible"
 position="bottom">
 ...
</mt-popup>

// 解决方式,通过监听popupVisible变量,在弹窗出现后禁止bode节点touchMove事件,弹窗消失后恢复body节点的touchMove事件

const handler = function(e) {
  e.preventDefault();
}

// vue实例内
watch: {
  popupVisible: function (val) {
   if(val) {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   } else {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   }
  }
}

Datetime Picker

// 官方实例

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue">
</mt-datetime-picker>

// 解决方式:这个组件比较坑,由于Datetime Picker没有提供弹窗显示和隐藏的绑定变量,所以我们无采用解决popup的方式解决问题,只能通过打开事件,确认事件、取消事件,点击蒙层弹窗消失这几个时间点去解决。官方给出的属性方法只支持确认事件,打开事件。没有明文给出取消事件的回调函数,更不支持点击蒙层弹窗消失事件,所以很坑。

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue"
  @confirm="confirm">
</mt-datetime-picker>

const handler = function(e) {
  e.preventDefault();
}

// vue实例内

methods: {
  openPicker() { // 打开事件
    document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
    this.$refs.picker.open();
  },
  confirm() { // 确认事件
    document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
  }
}

此时还缺一个取消回调还有蒙层点击事件,然后看源码其实mint-ui源码里是支持取消回调事件的,另外面,惊喜的是在2.0版本之后的mint-ui给Datetime picker组件 新加了visible-change事件和closeOnClickModal属性(传送门),但官方文档依旧没更新出来这些属性。现在就很好的解决了上述问题。

而且有了visible-change事件就可以不用按上述思路解决了。组件部分源码如下:

props: {
  ...,
  closeOnClickModal: {
    type: Boolean,
    default: true
  }
},
watch: {
  ...,
 visible(val) {
  this.$emit('visible-change', val);
 }
},
...
<span class="mint-datetime-action mint-datetime-cancel" @click="visible = false;$emit('cancel')">{{ cancelText }}</span>

直接一个visible-change方法搞定

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue"
  @confirm="confirm"
  @visible-change=""handleValueChange>
</mt-datetime-picker>

const handler = function(e) {
  e.preventDefault();
}

// vue实例内
methods: {
  handleValueChange: function (val) {
   if(val) {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   } else {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   }
  }
}

上面的方法已经可以解决项目遇到到的坑了,但是每个页面用到组件Popup组件和Datetime Picker都需要去加上这段代码,当页面存在多个Popup组件就需要监听多个变量。

更好的解决方式(上述方式在网上也有类似解决方式,自己补充了visible-change方案)

在项目中按上面那样解决太麻烦了,所以又想了一个体验比较好的解决方案,因为弹层的出现和消失会触发组件更新,所以想到和可以全局注册一个指令v-roll,运用指令的componentUpdated钩子来实现这个功能。代码如下

// 全局注册指令
const handler = (e) => {
 e.preventDefault();
};
Vue.directive('roll', {
 componentUpdated(el, binding) {
  if (binding.value) {
   document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
  } else {
   document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
  }
 }
});

这样一来精简了很多代码,其他开发者用到时只需要给对应组件加一个v-roll指令即可。

// popup组件处理方式
<mt-popup
 v-model="popupVisible"
 v-roll:visible=popupVisible>
 ...
</mt-popup>

// mt-datetime-picker组件处理方式
<mt-datetime-picker 
 ref="datePicker" 
 v-model="date"
 @visible-change="handleVisibleChange"
 v-roll:visible=pVisible
 ...>
</mt-datetime-picker>
...
data: {
  pVisible: false 
},
methods: {
  handleVisibleChange (isVisible) {
    this.pVisible = isVisible;
  }
}

接着还遇到一个坑,当同一个视图页面存在多个组件Popup组件和Datetime Picker使用指令时,会集体触发指令。所以会相互覆盖,如打开A弹层,阻止页面touchMove事件,但另外一个popuu组件也触发钩子函数,又取消阻止touchMove事件,导致没效果。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。// 这里目前自己的理解是由于弹层出现和消失导致所在视图界面节点更新,所以其他节点绑定了v-roll指令的钩子也被触发了

解决方案:对于一个视图内使用多个多个组件Popup组件和Datetime Picker的,给指令传入数组类型

// 全局注册指令
const handler = (e) => {
 e.preventDefault();
};
Vue.directive('roll', {
 componentUpdated(el, binding) {
  if (binding.value instanceof Array) {
   const visible = binding.value.some(e => e); // 当视图所有控制弹层的变量存在一个是true,即可阻止touchmove事件
   if (visible) {
    document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
   } else {
    document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
   }
  } else if (typeof binding.value === 'boolean') {
   if (binding.value) {
    document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
   } else {
    document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
   }
  }
 }
});

// popup组件处理方式
<mt-popup
 v-model="popupVisible"
 v-roll:visible=[popupVisible, pVisible]>
 ...
</mt-popup>

// mt-datetime-picker组件处理方式
<mt-datetime-picker 
 ref="datePicker" 
 v-model="date"
 @visible-change="handleVisibleChange"
 v-roll:visible=[popupVisible, pVisible]
 ...>
</mt-datetime-picker>
...
data: {
  pVisible: false 
},
methods: {
  handleVisibleChange (isVisible) {
    this.pVisible = isVisible;
  }
}

目前mint-ui还未修复该问题,所以暂且使用上述方案解决。一开始打算改源码,但是不现实,因为以后可能需要更新mint-ui版本。大家也可以帮忙看下以上解决方式是否有坑。

补充知识: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();//打开默认事件
 
     },

然后就解决了这个问题!

以上这篇解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
vue实现图书管理系统
Dec 29 Vue.js
基于js实现的图片拖拽排序源码实例
Nov 04 #Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 #Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 #Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 #Javascript
Vue绑定用户接口实现代码示例
Nov 04 #Javascript
vant picker+popup 自定义三级联动案例
Nov 04 #Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 #Javascript
You might like
php error_log 函数的使用
2009/04/13 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
在python中bool函数的取值方法
2018/11/01 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
车间班长岗位职责
2013/11/30 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
一体化教学实施方案
2014/05/10 职场文书
社区平安建设方案
2014/05/25 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
员工教育培训协议书
2014/09/27 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技