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

[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

https://github.com/vuejs/vue/issues/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 有修复这个问题吗？

[chenjiahan]

@bolechen 之前测试的结果是，Vue 2.6 在低版本 iOS 上的事件不冒泡了，这个我们没法修复，只能等 Vue 处理。近期我们会再看下

[bolechen]

@bolechen 之前测试的结果是，Vue 2.6 在低版本 iOS 上的事件不冒泡了，这个我们没法修复，只能等 Vue 处理。近期我们会再看下

辛苦了，感谢反馈。
所以现在官方的建议是升级到 vue 2.6 还是继续用 2.5.22，我看手册中的示例代码都是 2.6 的语法了。

[chenjiahan]

@bolechen 两者皆可，相对来说更推荐用 2.5.22

用 2.5.22 的好处是比较稳定，兼容性强
用 2.6.10 在大多数情况下也是稳定的，看苹果官方的数据，iOS 11+ 的占比在 96%+，如果是用户量大的产品，建议先用 2.5.22

[kson34]

试了降到 vue 2.5.22 在IOS10 一样不兼容。

[leemoncn]

这个问题是只有ios有问题吗？ios11正常？

[ethanyou725]

6sp ios 10.1.1 正常, 6 ios 10.3.2 在微信浏览器里异常, 在Safari 都是正常的

[kson34]

.......

[chenjiahan]

@kson34 啥都没改喔

[onezhaoyn]

把vue、vue-template-compiler降级到2.5.22后，picker无法滑动问题解决。
官方能去Vue提个issue吗，或者在这里给个vue相关issue的链接

[chenjiahan]

@zhaoyn7 手头暂时没 iOS 10 的机器，你能复现的话可以帮忙去提个 issue

[yangmei120]

环境：iOS 11 点击折叠面板首次没问题，再次点击页面消失了。
在安卓，浏览器均正常

[warmilk]

楼上的各位盆友，可以右转去隔壁饿了么 mint-ui 的 issue 列表里参观下，他们那个 Index list 组件滚不动的 bug 跟咱们 vant 的这个 bug 类似，也是放在那两年多了还没 fixed 。戳这里

这肯定不是咱们的锅，是 Safari 绝不向 Google 的盟友 -- W3C 组织低头的锅【狗头

[warmilk]

@chenjiahan 会不会是 iOS的 300 毫秒点击延迟 这个历史遗留问题导致的？可以尝试下引入 touch.js 来解决～～

[chenjiahan]

跟点击延迟没关系

[chenjiahan]

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

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

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

[DongJigong]

到底解决了没啊? iphone8Plus ios系通11.x上面,picker选择项无法滑动选择. iphoneX是没问题的

[zhangrongwu]

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

完美处理下拉组建无法正常使用问题

[lijibing01]

IndexBar组件在微信浏览器中偶现无法滑动，IOS版本12.2，vant 版本2.1.2

已安装2.5版本任然出现问题：
npm i [email protected] --save
npm i [email protected] --save

[lanlianjiu]

ipone6s中，触底加载和下拉刷新组件组合做的列表，进入列表先触底操作，再下拉刷新时很难触发下拉刷新事件。直接用dome放在手机上，也是如此。有大神遇到这样的问题吗？求带。

[xiaoak]

uploader 组件的部分方法绑定之后无法正常触发，click-preview想自定义预览图片没有办法实现

[Ellen0604]

iPad 系统10.3.2 首次打开组件功能正常 静置一段时间组件无法正常操作 包括(picker无法选择，SwipeCell无法滑动等) 需杀掉进程重启 期待最新进展

[szGodfery]

最新的vant。ios 10.3.3 微信浏览器和Safari，picker无法拖动，无法选择。期待尽快解决。

[PerfectYan]

npm i [email protected] --save
npm i [email protected] --save
降级后，滑动事件冒泡相关问题已经解决了

vant 2.2.3最新版本，iOS-11.2 Safari 中uploader无法上传图片没有解决，怎么办?

[PerfectYan]

最新的vant。ios 10.3.3 微信浏览器和Safari，picker无法拖动，无法选择。期待尽快解决。

npm i [email protected] [email protected] --save
降低vue版本可以解决

[Ellen0604]

最新的vant。ios 10.3.3 微信浏览器和Safari，picker无法拖动，无法选择。期待尽快解决。

npm i [email protected] [email protected] --save
降低vue版本可以解决

不能 试过了

[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
问题同：https://github.com/youzan/vant/issues/5123

[KingArticle]

华为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事件，可以解决

[KingArticle]

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哪个版本可以避免这个问题呢？