diff --git a/document/components/docs/zh-CN/index-list.md b/document/components/docs/zh-CN/index-list.md index beb74748d4e10053db4614d5c07297f3a5f2558b..cd0845dbed3a17f54f548878d507ac1ca006e3eb 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 76d22c8a782438e9280fa5fb75d6cf3d53bc1bbe..fcdb6656d7daf2d69d94792d6ec4cc8fe6d02c68 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 ed82d2df2fca93e7844bfe665e14a94feeb970ec..39f1e7bb16b3db1789c74ae21c4bcd5555c1aae6 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 4de10872489467450d5d5ca9fb49e1de0efca49f..d9f13792b863edc1cd52b0db2d7c84b982ee68a4 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 0bcce575b90b6f344f123d7937ff5dcc76f1bc11..e9df514d688a598e07ae0aefc0575f3bf04543f0 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 0000000000000000000000000000000000000000..6279924f708e21fc10c088aec5a5464b773947dc --- /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 f85592963930a240c96be420de95ed316c08cefe..1c65f0adab292cb7c74520400fa915413b9e10bc 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 1c0f8b3b648f6e21fbf1f65fb9cf2cf739fdee42..45ae30f45a8a0f38a8d660e66d4332ebc6c67ef0 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 187e1cc685f3603d3ef4bcba93a6b3fa74ef8e4b..16d7aa04cc5b82882b0a6c4fd9d3a14004d38b6c 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 28dcd44589b0ebf2ca936d3e2158a2b37efaf518..268814541f90aaadad6751cf283bad76c4afd0bc 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)