fix the scrolling problem in iOS13.4 (#697)

* feat(helpers): add method to detect iOS version

* feat(helpers): add a variable to determine whether it is iOS environment

* feat(bscroll): set the default value of variable use-transition

* fix(picker): fix the scrolling problem in iOS13.4 webview

* fix(scroll): fix the scrolling problem in iOS13.4 webview

* docs(ios13.4): added default description of better-scroll parameter

document/components/docs/zh-CN/index-list.md

@@ -231,7 +231,7 @@
 | data | 需要展示的数据 | Array | [] |
 | navbar | 是否需要导航栏 | Boolean | true |
 | speed | 点击导航栏索引时，滚动到相应位置的动画时间（单位：ms） | number | 0 |
-| options<sup>1.9.8+</sup> | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
+| options<sup>1.9.8+</sup> | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} <br>`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`<br>具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978)|
 | pullUpLoad<sup>1.8.0+</sup> | 上拉加载，具体配置参考 scroll 组件的 `options.pullUpLoad`。`即将废弃`，推荐使用 `options` 属性 | Boolean/Object | false |
 | pullDownRefresh<sup>1.8.0+</sup> | 下拉刷新，具体配置参考 scroll 组件的 `options.pullDownRefresh`。`即将废弃`，推荐使用 `options` 属性 | Boolean/Object | false |
 

document/components/docs/zh-CN/scroll-nav-bar.md

@@ -110,7 +110,7 @@
 | labels | 所有的 key 值集合 | Array | - | [] |
 | txts | 显示所有文案集合，和 labels 一一对应，每项可以是 HTML 字符串 | Array | - | 默认等于 labes |
 | current | 当前 active 的 key 值 | String/Number | - | '' |
-| options | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {} |
+| options | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {}  <br>`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`<br>具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978)|
 
 ### 插槽
 

document/components/docs/zh-CN/scroll-nav.md

@@ -146,7 +146,7 @@
 | side | 是否是侧边样式 | Boolean | true/false | false |
 | current | 当前导航 active 项的 key 值 | String/Number | - | '' |
 | speed | 点击导航切换到指定位置的速度 | Number | - | 300 |
-| options | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {} |
+| options | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {} <br>`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`<br>具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978) |
 
 #### CubeScrollNavPanel
 

document/components/docs/zh-CN/scroll.md

@@ -412,7 +412,7 @@
 | - | - | - | - | - |
 | data | 用于列表渲染的数据 | Array | - | [] |
 | direction | 滚动方向 | String | 'vertical', 'horizontal' | 'vertical' |
-| options | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
+| options | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} <br>`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`<br>具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978)|
 | scrollEvents<sup>1.9.0</sup> | 配置需要派发的 scroll 事件 | Array | 可包含子项：'scroll', 'before-scroll-start', 'scroll-end' | [] |
 | listenScroll | 是否派发 scroll 事件。`即将废弃`，推荐使用 `scroll-events` 属性 | Boolean | true/false | false |
 | listenBeforeScroll | 是否派发 before-scroll-start 事件。`即将废弃`，推荐使用 `scroll-events` 属性 | Boolean | true/false | false |

document/components/docs/zh-CN/slide.md

@@ -185,7 +185,7 @@
 | autoPlay | 是否自动播放 | Boolean | true/false | true |
 | interval | 播放间隔 | Number | - | 4000 |
 | direction | 轮播方向 | String | horizontal/vertical | horizontal |
-| options<sup>1.9.0</sup> | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {<br>  momentum: false,<br>  click: true,<br>  observeDOM: false<br>} |
+| options<sup>1.9.0</sup> | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {<br>  momentum: false,<br>  click: true,<br>  observeDOM: false<br>} <br>`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`<br>具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978) |
 | threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 |
 | speed | 切换页面的速度 | Number | - | 400 |
 | allowVertical | 是否允许竖向滚动。`即将废弃`，推荐使用 `options` 属性 | Boolean | true/false | false |

src/common/bscroll/constants.js

+import { ua, isIOS } from '../helpers/env'
+import { getIOSVersion } from '../helpers/util'
+
+function getUseTransition() {
+  let useTransition = true
+  if (isIOS) {
+    const version = getIOSVersion(ua)
+    if (!version) return useTransition
+
+    if (version.major >= 13 && version.minor >= 4) {
+      useTransition = false
+    }
+  }
+  return useTransition
+}
+
+// fix the scrolling problem in iOS13.4 webview
+export const USE_TRANSITION = getUseTransition()

src/common/helpers/env.js

@@ -2,3 +2,4 @@
 export const inBrowser = typeof window !== 'undefined'
 export const ua = inBrowser && navigator.userAgent.toLowerCase()
 export const isAndroid = ua && ua.indexOf('android') > 0
+export const isIOS = ua && /iphone|ipad|ipod|ios/.test(ua)

src/common/helpers/util.js

@@ -181,6 +181,20 @@ function parsePath (obj, path = '') {
   return result
 }
 
+function getIOSVersion(ua) {
+  const regex = /os (\d\d?_\d(_\d)?)/
+  const matches = regex.exec(ua)
+  if (!matches) return null
+  const parts = matches[1].split('_').map(function(item) {
+    return parseInt(item, 10)
+  })
+  return {
+    major: parts[0],
+    minor: parts[1],
+    patch: parts[2] || 0
+  }
+}
+
 const isFunc = judgeTypeFnCreator('Function')
 const isUndef = judgeTypeFnCreator('Undefined')
 const isArray = judgeTypeFnCreator('Array')
@@ -203,5 +217,6 @@ export {
   isArray,
   isString,
   isObject,
-  isNumber
+  isNumber,
+  getIOSVersion
 }

src/components/picker/picker.vue

@@ -49,7 +49,7 @@
   import basicPickerMixin from '../../common/mixins/basic-picker'
   import pickerMixin from '../../common/mixins/picker'
   import localeMixin from '../../common/mixins/locale'
-
+  import { USE_TRANSITION } from '../../common/bscroll/constants'
   const COMPONENT_NAME = 'cube-picker'
 
   const EVENT_SELECT = 'select'
@@ -232,10 +232,25 @@
               wheelItemClass: 'cube-picker-wheel-item'
             },
             swipeTime: this.swipeTime,
-            observeDOM: false
+            observeDOM: false,
+            useTransition: USE_TRANSITION
           })
           wheel.on('scrollEnd', () => {
-            this.$emit(EVENT_CHANGE, i, wheel.getSelectedIndex())
+            const y = wheel.y
+            let selectedIndex
+            if (USE_TRANSITION) {
+              selectedIndex = wheel.getSelectedIndex()
+            } else {
+              // fixed BScroll not calculating selectedIndex when setting useTransition to false
+              if (y > wheel.minScrollY) {
+                selectedIndex = 0
+              } else if (y < wheel.maxScrollY) {
+                selectedIndex = wheel.items.length - 1
+              } else {
+                selectedIndex = Math.round(Math.abs(y / wheel.itemHeight))
+              }
+            }
+            this.$emit(EVENT_CHANGE, i, selectedIndex)
           })
         } else {
           this.wheels[i].refresh()

src/components/scroll/scroll.vue

@@ -55,6 +55,7 @@
   import deprecatedMixin from '../../common/mixins/deprecated'
   import { getRect } from '../../common/helpers/dom'
   import { camelize } from '../../common/lang/string'
+  import { USE_TRANSITION } from '../../common/bscroll/constants'
 
   const COMPONENT_NAME = 'cube-scroll'
   const DIRECTION_H = 'horizontal'
@@ -260,12 +261,13 @@
           return
         }
         this._calculateMinHeight()
-
-        let options = Object.assign({}, DEFAULT_OPTIONS, {
+        let dynamicOptions = {
           scrollY: this.direction === DIRECTION_V,
           scrollX: this.direction === DIRECTION_H,
-          probeType: this.needListenScroll ? 3 : 1
-        }, this.options)
+          probeType: this.needListenScroll ? 3 : 1,
+          useTransition: USE_TRANSITION
+        }
+        let options = Object.assign({}, DEFAULT_OPTIONS, dynamicOptions, this.options)
 
         this.scroll = new BScroll(this.$refs.wrapper, options)