首页 >> js开发 >> js解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题js大全
js解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。现象还原现象还原官方地址手机扫码查看demo，查看两个组件Popup组件和Datetime的例子演示。问题原因问题原因HTML5触摸事件touchmove事件：当手指在屏幕上滑动的时候连续地触发所以当激活出组件Popup组件和Datetime Picker的弹出层时，我们在弹层选择内容时上下连续滑动是会触发该事件解决思路解决思路在弹出层出现之后阻止body的touchmove事件，在弹层消失之后移除阻止事件使用mint-ui组件库的解决方式使用mint-ui组件库的解决方式Popup组件Popup组件// 官方实例
v-model="popupVisible"
position="bottom">
...
v-model="popupVisible"
position="bottom">
...
// 解决方式，通过监听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 });
}
}
}
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 PickerDatetime Picker// 官方实例
ref="picker"
type="time"
v-model="pickerValue">
ref="picker"
type="time"
v-model="pickerValue">
// 解决方式：这个组件比较坑，由于Datetime Picker没有提供弹窗显示和隐藏的绑定变量，所以我们无采用解决popup的方式解决问题，只能通过打开事件，确认事件、取消事件，点击蒙层弹窗消失这几个时间点去解决。官方给出的属性方法只支持确认事件，打开事件。没有明文给出取消事件的回调函数，更不支持点击蒙层弹窗消失事件，所以很坑。
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm">
const handler = function(e) {
e.preventDefault();
}
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm">
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 });
}
}
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);
}
},
...
{{ cancelText }}
props: {
...,
closeOnClickModal: {
type: Boolean,
default: true
}
},
watch: {
...,
visible(val) {
this.$emit('visible-change', val);
}
},
...
{{ cancelText }}直接一个visible-change方法搞定
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm"
@visible-change=""handleValueChange>
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 });
}
}
}
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm"
@visible-change=""handleValueChange>
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方案）更好的解决方式（上述方式在网上也有类似解决方式，自己补充了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 });
}
}
});
// 全局注册指令
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组件处理方式
v-model="popupVisible"
v-roll:visible=popupVisible>
...
// mt-datetime-picker组件处理方式
ref="datePicker"
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=pVisible
...>
...
data: {
pVisible: false
},
methods: {
handleVisibleChange (isVisible) {
this.pVisible = isVisible;
}
}
// popup组件处理方式
v-model="popupVisible"
v-roll:visible=popupVisible>
...
// mt-datetime-picker组件处理方式
ref="datePicker"
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=pVisible
...>
...
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组件处理方式
v-model="popupVisible"
v-roll:visible=[popupVisible, pVisible]>
...
// mt-datetime-picker组件处理方式
ref="datePicker"
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=[popupVisible, pVisible]
...>
...
data: {
pVisible: false
},
methods: {
handleVisibleChange (isVisible) {
this.pVisible = isVisible;
}
}
// 全局注册指令
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组件处理方式
v-model="popupVisible"
v-roll:visible=[popupVisible, pVisible]>
...
// mt-datetime-picker组件处理方式
ref="datePicker"
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=[popupVisible, pVisible]
...>
...
data: {
pVisible: false
},
methods: {
handleVisibleChange (isVisible) {
this.pVisible = isVisible;
}
}
目前mint-ui还未修复该问题，所以暂且使用上述方案解决。一开始打算改源码，但是不现实，因为以后可能需要更新mint-ui版本。大家也可以帮忙看下以上解决方式是否有坑。补充知识：Vue中使用mint-ui的日期插件时在ios上会有滚动穿透问题补充知识：补充知识：Vue中使用mint-ui的日期插件时在ios上会有滚动穿透问题问题：在ios上选择日期上下滑动时，整个页面会跟着滚动，安卓是正常的解决方法就是在日期弹出层出现的时候禁止页面的默认滚动机制，日期弹出层消失的时候解除禁止页面的默认滚动机制1.调用日期组件1.调用日期组件
type="date"
ref="picker"
v-model="nowTime"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm"
:startDate="startDate"
:endDate="endDate"
>
type="date"
ref="picker"
v-model="nowTime"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm"
:startDate="startDate"
:endDate="endDate"
>
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.");
},
}
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();
}
}
},
//侦听属性
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();//打开默认事件
},
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组件滚动穿透的问题就是小编分享给大家的全部内容了，希望能给大家一个参考。
position="bottom">
...
position="bottom">
...
// 解决方式，通过监听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 });
}
}
}
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 PickerDatetime Picker// 官方实例
ref="picker"
type="time"
v-model="pickerValue">
ref="picker"
type="time"
v-model="pickerValue">
// 解决方式：这个组件比较坑，由于Datetime Picker没有提供弹窗显示和隐藏的绑定变量，所以我们无采用解决popup的方式解决问题，只能通过打开事件，确认事件、取消事件，点击蒙层弹窗消失这几个时间点去解决。官方给出的属性方法只支持确认事件，打开事件。没有明文给出取消事件的回调函数，更不支持点击蒙层弹窗消失事件，所以很坑。
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm">
const handler = function(e) {
e.preventDefault();
}
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm">
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 });
}
}
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);
}
},
...
{{ cancelText }}
props: {
...,
closeOnClickModal: {
type: Boolean,
default: true
}
},
watch: {
...,
visible(val) {
this.$emit('visible-change', val);
}
},
...
{{ cancelText }}直接一个visible-change方法搞定
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm"
@visible-change=""handleValueChange>
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 });
}
}
}
ref="picker"
type="time"
v-model="pickerValue"
@confirm="confirm"
@visible-change=""handleValueChange>
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方案）更好的解决方式（上述方式在网上也有类似解决方式，自己补充了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 });
}
}
});
// 全局注册指令
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组件处理方式
v-roll:visible=popupVisible>
...
// mt-datetime-picker组件处理方式
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=pVisible
...>
...
data: {
pVisible: false
},
methods: {
handleVisibleChange (isVisible) {
this.pVisible = isVisible;
}
}
// popup组件处理方式
v-roll:visible=popupVisible>
...
// mt-datetime-picker组件处理方式
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=pVisible
...>
...
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组件处理方式
v-roll:visible=[popupVisible, pVisible]>
...
// mt-datetime-picker组件处理方式
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=[popupVisible, pVisible]
...>
...
data: {
pVisible: false
},
methods: {
handleVisibleChange (isVisible) {
this.pVisible = isVisible;
}
}
// 全局注册指令
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组件处理方式
v-roll:visible=[popupVisible, pVisible]>
...
// mt-datetime-picker组件处理方式
v-model="date"
@visible-change="handleVisibleChange"
v-roll:visible=[popupVisible, pVisible]
...>
...
data: {
pVisible: false
},
methods: {
handleVisibleChange (isVisible) {
this.pVisible = isVisible;
}
}
目前mint-ui还未修复该问题，所以暂且使用上述方案解决。一开始打算改源码，但是不现实，因为以后可能需要更新mint-ui版本。大家也可以帮忙看下以上解决方式是否有坑。补充知识：Vue中使用mint-ui的日期插件时在ios上会有滚动穿透问题补充知识：补充知识：Vue中使用mint-ui的日期插件时在ios上会有滚动穿透问题问题：在ios上选择日期上下滑动时，整个页面会跟着滚动，安卓是正常的解决方法就是在日期弹出层出现的时候禁止页面的默认滚动机制，日期弹出层消失的时候解除禁止页面的默认滚动机制1.调用日期组件1.调用日期组件
type="date"
ref="picker"
v-model="nowTime"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm"
:startDate="startDate"
:endDate="endDate"
>
type="date"
ref="picker"
v-model="nowTime"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm"
:startDate="startDate"
:endDate="endDate"
>
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.");
},
}
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();
}
}
},
//侦听属性
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();//打开默认事件
},
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组件滚动穿透的问题就是小编分享给大家的全部内容了，希望能给大家一个参考。
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
