【公告】 部分机型出现组件无法操作问题的解决方案

[chenjiahan]

背景

近期有比较多的童鞋反馈在 iOS 10.2、10.3、11.2 等版本的机型上出现组件无法操作、触摸没反应等问题，经排查是 Vue 2.6 更新引入的事件冒泡问题。

在 Vue 2.6 版本中，如果系统版本是 iOS 10.2 ~ 11.2，会偶现事件无法冒泡的情况，导致 Vant 部分组件里的逻辑无法触发。

最新进度

从 2.4 版本开始，我们通过手动绑定事件的方式来规避这个问题，涉及以下组件：

• Area
• DatetimePicker
• ImagePreview
• Rate
• Slider
• Swipe
• SwipeCell
• NumberKeyboard
• Picker
• PullRefresh

解决方法

如果你遇到了类似的问题，升级到 Vant 2.4.0 以上版本即可解决

降级 Vue 版本到 2.5.22 亦可解决此问题：

npm i [email protected] [email protected] --save

相关 issue

vuejs/vue#10964

[stone-web]

华为p9下滑动选择时间的控件无反应

[aotemanzhuangui]

升级到2.6.10版本之后，对应vue-template-compiler升级到2.6.6版本以上，时间控件还是出现低版本ios无法滑动，只能点击的问题

[944zhang]

升级到2.6.10版本之后，对应VUE模板编译器升级到2.6.6版本以上，时间控件还是出现低版本IOS无法滑动，只能点击的问题

兄弟，时间控件低版本IOS无法滑动，只能点击的问题你解决了吗

[chenjiahan]

vue-template-compiler 需要与 vue 版本一致

[leemoncn]

试了一下，还是不行。
环境：ios 10.3.3，safari浏览器（不正常），chrome正常。
vue-template-compiler和vue都已经升级到2.6.10。

打开vant官方demo，基础组件->popup弹出层->底部弹出，picker只能点击，不能滑动。

[944zhang]

vue-template-compiler 需要与 vue 版本一致
vue-template-compiler和vue都已经升级到2.6.10还是不行

[lianghx-319]

picker 无法滚动只能点击

ios11
vue 2.5.x

疑似因为行内样式没有 -webkit- 众所周知 iOS10 和 iOS11 有几个版本的 safari 有很多 bug

[3110160]

slider iphone6ps 不能滑动

[3110160]

vue-template-compiler 需要与 vue 版本一致

兄弟 你试过能用了吗

[pengbo37877]

求一个降级的vue和vant组合

[chenjiahan]

@lianghx-319 Vue 内部会自动补全 style webkit 前缀，所以应该不是这个问题

[CalmHarbin]

看了之前一个大佬的回答,添加一段css样式可以解决Picker组件,DatetimePicke组件在ios微信浏览器中只能点击无法滑动的问题.
测试版本 ios 11.2.5 以及 ios 10.3.3
测试环境 Safari(正常) 微信浏览器(无法滚动) 企业微信浏览器(正常)
解决办法

1. cnpm i [email protected] --save
2. 添加一段全局css样式
   .van-picker-column { position: relative; z-index: 1; &::before { width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ''; } & > ul { z-index: -1; position: relative; } }
   这样就可以滑动选择了,但是无法点击选择了

[rock53770]

试了一下，还是不行。
环境：ios 10.3.3，微信浏览器和UC浏览器 偶现不能滑动
vue-template-compiler和vue都已经升级到2.6.10。

打开vant官方demo，基础组件->popup弹出层->底部弹出，picker只能点击，偶现不能滑动。不只是picker组件，包括左滑组件，轮播图，都会偶现不能手势滑动的问题

[zghbyslzf]

没啥子用，vue和vue-template-compile更新到2.6.10没有用，更新到2.5.22也没有用！

[liuzengwei]

请问这个问题何时修复呢。？

[SnowBeatRain]

上方的下拉刷新在手机上无效的处理结果：将[email protected]改为2.5.22

[HUA616436641]

vue版本2.6.2，ios10.2.1 下，1.6.18和1.6.19两个版本的imagePreview，预览的时候打开了图片，但是点击图片不能关闭，vue版本改成2.5.22可以正常关闭，使用1.6.18以下的版本也可以解决问题

[wYuJian]

DatetimePicker 在ios上无法显示

[bolechen]

请问这个有新的进展吗？vant 2.0 有修复这个问题吗？

[xujinjie]

降低版本还是不行，转mand mobile

[xxnhuanhuan]

ios日期控件显示空白 怎么解决？？

[defypro]

看了之前一个大佬的回答,添加一段css样式可以解决Picker组件,DatetimePicke组件在ios微信浏览器中只能点击无法滑动的问题.
测试版本 ios 11.2.5 以及 ios 10.3.3
测试环境 Safari(正常) 微信浏览器(无法滚动) 企业微信浏览器(正常)
解决办法

1. cnpm i [email protected] --save
2. 添加一段全局css样式
   .van-picker-column { position: relative; z-index: 1; &::before { width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ''; } & > ul { z-index: -1; position: relative; } }
   这样就可以滑动选择了,但是无法点击选择了

确实可以解决了，虽说无法点击选择，但是起码可以让不兼容的手机进行选择了。大佬V5

[defypro]

背景

近期有比较多的童鞋反馈在 iOS 10.2 ~ 10.3 机型上出现组件无法操作、触摸没反应等问题，经排查是 Vue 2.6 更新引入的事件冒泡问题。

在 Vue 2.6 版本中，如果系统版本是 iOS 10.2 ~ 10.3，会偶现事件无法冒泡的情况，导致 Vant 部分组件里的逻辑无法触发。

解决方法

如果你遇到了类似的问题，且 Vue 版本是 2.6.x 的话，降级 Vue 版本到 2.5 版本即可：

npm i [email protected] [email protected] --save

目前进展

找到一台 iOS 10.3.3 系统的手机，但是未复现此问题

如果有同学能复现这个问题的话，请打开vue.runtime.esm.js，对下面这段代码进行调试

若能执行original.apply(this, arguments)，表示冒泡事情正常触发，若未执行，表示冒泡事件未能触发

想问一下我在#4688中提到的，首次进入无法正常滑动，但是刷新一下之后却可以正常使用了，这个现象能有讲解一下嘛？

[chenjiahan]

@defypro 原因就是上面提到的，Vue 本身的事件不冒泡

可以拿以下代码测试，正常情况下，点击子元素会输出 'child'，再输出 'parent'。

但在有兼容性的机型下，只会输出 'child'，不会触发父元素绑定的事件

<template>
  <div @click="log('parent')">
    父元素
    <div @click="log('child')">子元素</div>
  </div>
</template>

export default {
  methods: {
    log(text) {
      console.log(text);
    }
  }
}

[yec520]

如果说把vue的版本替换为2.5.22的话，，虽然说ios10.3.1的可以了，但ios其他的版本就触发不了下拉刷新这个事件了。

[chenjiahan]

@yec520 没有遇到过这种情况呢

[lwpassvoice]

ios11.2遇到了相同问题
vue 2.6.10
vant 2.2.14
问题同：#5123

[Dark-zx]

华为p20手机上，picker和DatetimePicker确认键点不动，

[TengFeiHao]

this.$refs.touchel.addEventListener('touchstart', this.onTouchStart, false) this.$refs.touchel.addEventListener('touchmove', this.onTouchMove, false) this.$refs.touchel.addEventListener('touchend', this.onTouchEnd, false) this.$refs.touchel.addEventListener('touchcancel', this.onTouchEnd, false)
可以自己监听去代替vue里的touch事件，可以解决

[Dark-zx]

this.$refs.touchel.addEventListener('touchstart', this.onTouchStart, false) this.$refs.touchel.addEventListener('touchmove', this.onTouchMove, false) this.$refs.touchel.addEventListener('touchend', this.onTouchEnd, false) this.$refs.touchel.addEventListener('touchcancel', this.onTouchEnd, false)
可以自己监听去代替vue里的touch事件，可以解决

谢谢，你也碰到这个问题嘛

[TengFeiHao]

this.$refs.touchel.addEventListener('touchstart', this.onTouchStart, false) this.$refs.touchel.addEventListener('touchmove', this.onTouchMove, false) this.$refs.touchel.addEventListener('touchend', this.onTouchEnd, false) this.$refs.touchel.addEventListener('touchcancel', this.onTouchEnd, false)
可以自己监听去代替vue里的touch事件，可以解决

谢谢，你也碰到这个问题嘛

对，然后，没办法，只能自己写监听事件了

[fengyun2]

回退到vant哪个版本可以避免这个问题呢？

[yufengkz]

vue2 bug依在，vue3 bug坚挺！