From 66757b88657ea7d7f30c63ed8e101b7ae207ea09 Mon Sep 17 00:00:00 2001 From: QiuShuiBai <33334963+QiuShuiBai@users.noreply.github.com> Date: Tue, 28 Apr 2020 19:05:59 +0800 Subject: [PATCH] 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 | 2 +- .../components/docs/zh-CN/scroll-nav-bar.md | 2 +- document/components/docs/zh-CN/scroll-nav.md | 2 +- document/components/docs/zh-CN/scroll.md | 2 +- document/components/docs/zh-CN/slide.md | 2 +- src/common/bscroll/constants.js | 18 ++++++++++++++++ src/common/helpers/env.js | 1 + src/common/helpers/util.js | 17 ++++++++++++++- src/components/picker/picker.vue | 21 ++++++++++++++++--- src/components/scroll/scroll.vue | 10 +++++---- 10 files changed, 64 insertions(+), 13 deletions(-) create mode 100644 src/common/bscroll/constants.js diff --git a/document/components/docs/zh-CN/index-list.md b/document/components/docs/zh-CN/index-list.md index beb74748..cd0845db 100644 --- a/document/components/docs/zh-CN/index-list.md +++ b/document/components/docs/zh-CN/index-list.md @@ -231,7 +231,7 @@ | data | 需要展示的数据 | Array | [] | | navbar | 是否需要导航栏 | Boolean | true | | speed | 点击导航栏索引时，滚动到相应位置的动画时间（单位：ms） | number | 0 | -| options1.9.8+ | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
} | +| options1.9.8+ | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
}
`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`
具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978)| | pullUpLoad1.8.0+ | 上拉加载，具体配置参考 scroll 组件的 `options.pullUpLoad`。`即将废弃`，推荐使用 `options` 属性 | Boolean/Object | false | | pullDownRefresh1.8.0+ | 下拉刷新，具体配置参考 scroll 组件的 `options.pullDownRefresh`。`即将废弃`，推荐使用 `options` 属性 | Boolean/Object | false | diff --git a/document/components/docs/zh-CN/scroll-nav-bar.md b/document/components/docs/zh-CN/scroll-nav-bar.md index 76d22c8a..fcdb6656 100644 --- a/document/components/docs/zh-CN/scroll-nav-bar.md +++ b/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 | - | {}
`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`
具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978)| ### 插槽 diff --git a/document/components/docs/zh-CN/scroll-nav.md b/document/components/docs/zh-CN/scroll-nav.md index ed82d2df..39f1e7bb 100644 --- a/document/components/docs/zh-CN/scroll-nav.md +++ b/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 | - | {}
`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`
具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978) | #### CubeScrollNavPanel diff --git a/document/components/docs/zh-CN/scroll.md b/document/components/docs/zh-CN/scroll.md index 4de10872..d9f13792 100644 --- a/document/components/docs/zh-CN/scroll.md +++ b/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 | - | {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
} | +| options | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
}
`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`
具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978)| | scrollEvents1.9.0 | 配置需要派发的 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 | diff --git a/document/components/docs/zh-CN/slide.md b/document/components/docs/zh-CN/slide.md index 0bcce575..e9df514d 100644 --- a/document/components/docs/zh-CN/slide.md +++ b/document/components/docs/zh-CN/slide.md @@ -185,7 +185,7 @@ | autoPlay | 是否自动播放 | Boolean | true/false | true | | interval | 播放间隔 | Number | - | 4000 | | direction | 轮播方向 | String | horizontal/vertical | horizontal | -| options1.9.0 | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {
momentum: false,
click: true,
observeDOM: false
} | +| options1.9.0 | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {
momentum: false,
click: true,
observeDOM: false
}
`注意`：从`1.12.37`版本开始，因修复[BS](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)在`iOS13.4`版本的滚动问题，`useTransition`在iOS版本>=13.4时默认为`fasle`
具体请参考[#978](https://github.com/ustbhuangyi/better-scroll/issues/978) | | threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 | | speed | 切换页面的速度 | Number | - | 400 | | allowVertical | 是否允许竖向滚动。`即将废弃`，推荐使用 `options` 属性 | Boolean | true/false | false | diff --git a/src/common/bscroll/constants.js b/src/common/bscroll/constants.js new file mode 100644 index 00000000..6279924f --- /dev/null +++ b/src/common/bscroll/constants.js @@ -0,0 +1,18 @@ +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() diff --git a/src/common/helpers/env.js b/src/common/helpers/env.js index f8559296..1c65f0ad 100644 --- a/src/common/helpers/env.js +++ b/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) diff --git a/src/common/helpers/util.js b/src/common/helpers/util.js index 1c0f8b3b..45ae30f4 100644 --- a/src/common/helpers/util.js +++ b/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 } diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue index 187e1cc6..16d7aa04 100644 --- a/src/components/picker/picker.vue +++ b/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() diff --git a/src/components/scroll/scroll.vue b/src/components/scroll/scroll.vue index 28dcd445..26881454 100644 --- a/src/components/scroll/scroll.vue +++ b/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) -- GitLab