From 79bb4a632e509709d348b9e440d70d25f26a274c Mon Sep 17 00:00:00 2001 From: Amy Date: Sun, 13 May 2018 21:28:58 +0800 Subject: [PATCH] [feat]: scroll + slide (#190) * [update] better-scroll: 1.10.3 * [feat] scroll: event scroll end * [fix] slide: change verticle * [feat] slide: bounce config + event scroll end * [fix] slide: data render bug * [update] * [feat] scroll: config scroll events by only one prop scrollEvents * [doc] * [feat] slide: options of scroll * [doc] * [update] scroll-events * [update] scroll-events * [add] scroll mixin * [update] index-list: use scroll-events * [update] checkAbandon * [update] * [doc] * [doc] scroll: english * [docs] * [update] slide: just trigger scroll-end * [fix] * [test] * [test] scroll: scrollEvents * [test] * [update] use deprecated replace abandon * [update] tip word --- document/components/docs/en-US/scroll.md | 12 +-- document/components/docs/en-US/slide.md | 10 ++- document/components/docs/zh-CN/scroll.md | 12 +-- document/components/docs/zh-CN/slide.md | 12 +-- example/pages/scroll.vue | 8 +- example/pages/slide/horizontal.vue | 9 ++- example/pages/slide/vertical.vue | 18 +++-- package-lock.json | 6 +- package.json | 2 +- src/common/lang/string.js | 5 ++ src/common/mixins/scroll.js | 11 +++ src/components/index-list/index-list.vue | 4 +- src/components/scroll/scroll.vue | 84 ++++++++++++++------- src/components/slide/slide.vue | 96 ++++++++++++++++-------- test/unit/specs/scroll.spec.js | 84 ++++++++++++++++----- test/unit/specs/slide.spec.js | 57 ++++++++++++-- 16 files changed, 310 insertions(+), 120 deletions(-) create mode 100644 src/common/mixins/scroll.js diff --git a/document/components/docs/en-US/scroll.md b/document/components/docs/en-US/scroll.md index a6516557..48108b37 100644 --- a/document/components/docs/en-US/scroll.md +++ b/document/components/docs/en-US/scroll.md @@ -176,10 +176,11 @@ | Attribute | Description | Type | Accepted Values | Default | | - | - | - | - | - | | data | data used for list rendering | Array | - | [] | -| options | the options of better-scroll | Object | - | {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
} | | direction | scrolling direction | String | 'vertical', 'horizontal' | 'vertical' | -| listenScroll | whether to dispatch scroll event | Boolean | true/false | false | -| listenBeforeScroll | whether to dispatch before-scroll-start event | Boolean | true/false | false | +| options | the options of better-scroll, you could find details at [BS Document](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
} | +| scroll-events1.9.0 | configure which scroll events need be triggered | Array | could include: 'scroll', 'before-scroll-start', 'scroll-end' | [] | +| listen-scroll | whether to dispatch scroll event. `Deprecated`, please use the property `scroll-events` instead. | Boolean | true/false | false | +| listen-before-scroll | whether to dispatch before-scroll-start event. `Deprecated`, please use the property `scroll-events` instead. | Boolean | true/false | false | | refreshDelay | the delay of scroll refresh after `data` updating | Number | - | 20 | In `options`, there are three frequently-used options, `scrollbar`、`pullDownRefresh`、`pullUpLoad`, which could set as `Boolean`(`false` to disable the feature, `true` to enable the feature and use default sub configuration), or `Object` to enable the feature and customize the sub configuration. @@ -218,7 +219,8 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe | Event Name | Description | Parameters | | - | - | - | | click | triggers when clicking the list item | item - the data of the list item | -| scroll | triggers according to the value of probeType, if listenScroll is true | Object {x, y} - real-time scrolling coordinates | -| before-scroll-start | triggers before scrolling start, if listenBeforeScroll | - | +| scroll | if `scroll-events` includes `scroll`, it will be triggered according to the value of probeType, if listenScroll is true | Object {x, y} - real-time scrolling coordinates | +| before-scroll-start | if `scroll-events` includes `before-scroll-start`, it will be triggered before scrolling start | - | +| scroll-end1.9.0 | if `scroll-events` includes `scroll-end`, it will be triggered when scroll end. | Object {x, y} - real-time scrolling coordinates | | pulling-down | triggers when the distance of pulling down exceeds the threshold, if pullDownRefresh is true | - | | pulling-up | triggers when the distance of pulling up exceeds the threshold, if pullUpLoad is true | - | diff --git a/document/components/docs/en-US/slide.md b/document/components/docs/en-US/slide.md index 21349372..7b6a9ee7 100644 --- a/document/components/docs/en-US/slide.md +++ b/document/components/docs/en-US/slide.md @@ -173,14 +173,15 @@ | - | - | - | - | - | | initialIndex | initial index | Number | - | 0 | | loop | whether to loop play | Boolean | true/false | true | +| showDots | whether to show the indicator dots | Boolean | true/false | true | | autoPlay | whether to play automatically | Boolean | true/false | true | | interval | interval of play | Number | - | 4000 | +| direction | slide direction | String | horizontal/vertical | horizontal | +| options1.9.0 | the options of better-scroll, you could find details at [BS Document](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {
momentum: false,
click: true,
observeDOM: false
} | | threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 | | speed | speed of switching pages | Number | - | 400 | -| allowVertical | whether to allow vertical scrolling | Boolean | true/false | false | -| direction | slide direction | String | horizontal/vertical | horizontal | -| showDots | whether to show the indicator dots | Boolean | true/false | true | -| stopPropagation | whether to stop propagation, which could use to solve the problem of event propagation when nest same direction slide | Boolean | true/false | false | +| allowVertical | whether to allow vertical scrolling. `Deprecated`, please use the property `options` instead. | Boolean | true/false | false | +| stopPropagation | whether to stop propagation, which could use to solve the problem of event propagation when nest same direction slide. `Deprecated`, please use the property `options` instead. | Boolean | true/false | false | ### Slot @@ -194,6 +195,7 @@ | Event Name | Description | Parameters | | - | - | - | | change | triggers when current slide changes | index of current slide | +| scroll-end1.9.0 | triggers when scroll end. | index of current slide | ### Instance methods diff --git a/document/components/docs/zh-CN/scroll.md b/document/components/docs/zh-CN/scroll.md index 6cadecac..be29e45f 100644 --- a/document/components/docs/zh-CN/scroll.md +++ b/document/components/docs/zh-CN/scroll.md @@ -193,10 +193,11 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | | - | - | - | - | - | | data | 用于列表渲染的数据 | Array | - | [] | -| options | better-scroll 配置项 | Object | - | {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
} | | direction | 滚动方向 | String | 'vertical', 'horizontal' | 'vertical' | -| listenScroll | 是否派发 scroll 事件 | Boolean | true/false | false | -| listenBeforeScroll | 是否派发 before-scroll-start 事件 | Boolean | true/false | 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
} | +| scroll-events1.9.0 | 配置需要派发的 scroll 事件 | Array | 可包含子项：'scroll', 'before-scroll-start', 'scroll-end' | [] | +| listen-scroll | 是否派发 scroll 事件。`即将废弃`，推荐使用 `scroll-events` 属性 | Boolean | true/false | false | +| listen-before-scroll | 是否派发 before-scroll-start 事件。`即将废弃`，推荐使用 `scroll-events` 属性 | Boolean | true/false | false | | refreshDelay | data属性的数据更新后，scroll 的刷新延时 | Number | - | 20 | `options`中 better-scroll 的几个常用配置项，`scrollbar`、`pullDownRefresh`、`pullUpLoad`这三个配置即可设为 `Boolean`（`false` 关闭该功能，`true` 开启该功能，并使用默认子配置），也可设为`Object`，开启该功能并具体定制其子配置项。 @@ -235,7 +236,8 @@ | 事件名 | 说明 | 参数 | | - | - | - | | click | 点击列表项时触发 | item - 该列表项的数据 | -| scroll | 当 listenScroll 为 true 时，根据 probeType 的值决定派发时机 | Object {x, y} - 滚动的实时坐标 | -| before-scroll-start | 当 listenBeforeScroll 属性为 true 时，在滚动开始之前触发 | - | +| scroll | 当 `scroll-events` 包含 `scroll` 时，根据 probeType 的值决定派发时机 | Object {x, y} - 实时滚动位置的坐标 | +| before-scroll-start | 当 `scroll-events` 包含 `before-scroll-start` 时，在滚动开始之前触发 | - | +| scroll-end1.9.0 | 当 `scroll-events` 包含 `scroll-end` 时，在滚动结束时触发 | Object {x, y} - 实时滚动位置的坐标 | | pulling-down | 当 pullDownRefresh 属性为 true 时，在下拉超过阈值时触发 | - | | pulling-up | 当 pullUpLoad 属性为 true 时，在上拉超过阈值时触发 | - | diff --git a/document/components/docs/zh-CN/slide.md b/document/components/docs/zh-CN/slide.md index 8ced10f9..7194cfef 100644 --- a/document/components/docs/zh-CN/slide.md +++ b/document/components/docs/zh-CN/slide.md @@ -157,14 +157,15 @@ | data | 用于 side-item 列表渲染的数据，当需要使用内置的默认内容，或者让组件自动监听数据变化重新渲染时，此参数必传 | Array | - | [] | | initialIndex | 初始索引值 | Number | - | 0 | | loop | 是否循环播放 | Boolean | true/false | true | +| showDots | 是否显示轮播指示点 | Boolean | true/false | true | | 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
} | | threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 | | speed | 切换页面的速度 | Number | - | 400 | -| allowVertical | 是否允许竖向滚动 | Boolean | true/false | false | -| direction | 轮播方向 | String | horizontal/vertical | horizontal | -| showDots | 是否显示轮播指示点 | Boolean | true/false | true | -| stopPropagation | 是否阻止事件冒泡，可用于解决嵌套同方向slide时会遇到的事件冒泡问题 | Boolean | true/false | false | +| allowVertical | 是否允许竖向滚动。`即将废弃`，推荐使用 `options` 属性 | Boolean | true/false | false | +| stopPropagation | 是否阻止事件冒泡，可用于解决嵌套同方向slide时会遇到的事件冒泡问题。`即将废弃`，推荐使用 `options` 属性 | Boolean | true/false | false | ### 插槽 @@ -177,7 +178,8 @@ | 事件名 | 说明 | 参数 | | - | - | - | -| change | Slide 当前展示项发生改变时触发 | 当前展示项的索引值 | +| change | Slide 页面切换时触发 | 当前页面的索引值 | +| scroll-end1.9.0 | 在滚动结束时触发 | 当前页面的索引值 | ### 实例方法 diff --git a/example/pages/scroll.vue b/example/pages/scroll.vue index 45e7fe04..ea76f5e6 100644 --- a/example/pages/scroll.vue +++ b/example/pages/scroll.vue @@ -51,6 +51,8 @@ ref="scroll" :data="items" :options="scrollOptions" + :scroll-events="scrollEvents" + @scroll="scrollHandler" @pulling-down="onPullingDown" @pulling-up="onPullingUp">