[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

@@ -176,10 +176,11 @@
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
 | data | data used for list rendering | Array | - | [] |
-| options | the options of better-scroll | Object | - | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
 | 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 | - | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
+| scroll-events<sup>1.9.0</sup> | 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-end<sup>1.9.0</sup> | 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 | - |

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 |
+| options<sup>1.9.0</sup> | the options of better-scroll, you could find details at [BS Document](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | - | {<br>  momentum: false,<br>  click: true,<br>  observeDOM: false<br>} |
 | 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-end<sup>1.9.0</sup> | triggers when scroll end. | index of current slide |
 
 
 ### Instance methods

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

@@ -193,10 +193,11 @@
 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
 | - | - | - | - | - |
 | data | 用于列表渲染的数据 | Array | - | [] |
-| options | better-scroll 配置项 | Object | - | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
 | 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 | - | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
+| scroll-events<sup>1.9.0</sup> | 配置需要派发的 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-end<sup>1.9.0</sup> | 当 `scroll-events` 包含 `scroll-end` 时，在滚动结束时触发 | Object {x, y} - 实时滚动位置的坐标 |
 | pulling-down | 当 pullDownRefresh 属性为 true 时，在下拉超过阈值时触发 | - |
 | pulling-up | 当 pullUpLoad 属性为 true 时，在上拉超过阈值时触发 | - |

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 |
+| 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>} |
 | 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-end<sup>1.9.0</sup> | 在滚动结束时触发 | 当前页面的索引值 |
 
 ### 实例方法
 

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">
             <ul v-if="customList" class="foods-wrapper">
@@ -183,7 +185,8 @@
             value: 'swipeBounce'
           }
         ],
-        customPullDown: false
+        customPullDown: false,
+        scrollEvents: ['scroll']
       }
     },
     components: {
@@ -323,6 +326,9 @@
           this.$refs.scroll.destroy()
           this.$refs.scroll.initScroll()
         })
+      },
+      scrollHandler(...args) {
+        // console.log('scroll:', ...args)
       }
     }
   }

example/pages/slide/horizontal.vue

@@ -11,7 +11,7 @@
             :interval="interval"
             :threshold="threshold"
             :speed="speed"
-            :allow-vertical="allowVertical"
+            :options="options"
             @change="changePage"
             @click="clickPage">
           <template v-if="dotsSlot" slot="dots" slot-scope="props">
@@ -93,6 +93,13 @@
         addItem3: false
       }
     },
+    computed: {
+      options() {
+        return {
+          eventPassthrough: this.allowVertical ? 'vertical' : ''
+        }
+      }
+    },
     watch: {
       addItem3(newV) {
         if (newV) {

example/pages/slide/vertical.vue

 <template>
   <cube-page type="slide-view" title="Slide" class="option-demo">
     <div slot="content">
-      <div ref="slideWrapper" class="slide-container-v">
+      <div class="slide-container-v">
         <cube-slide
-            ref="slide"
           :data="items"
           :loop="loop"
           :showDots="false"
           direction="vertical"
-           >
+          @change="change">
         </cube-slide>
       </div>
     </div>
@@ -44,6 +43,11 @@
         loop: true
       }
     },
+    methods: {
+      change(current) {
+        console.log('当前轮播图序号为:' + current)
+      }
+    },
     components: {
       CubePage
     }

package-lock.json

@@ -1407,9 +1407,9 @@
       }
     },
     "better-scroll": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/better-scroll/-/better-scroll-1.10.1.tgz",
-      "integrity": "sha512-JQ/PYcS47OmOZ0LIfVqXYcau60A92S9B5ZZvpUWjKQRepDu0oF8JpE+Ihb1lnn7yQJMQ3jkGsQMAbuMiXtRk9g==",
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/better-scroll/-/better-scroll-1.10.3.tgz",
+      "integrity": "sha512-1IlbM1+gkHfA+iFO1cgtkd7TOf78QJFbO1J5f3eDt8sQI75ngg+4Ueco6n0de2RHJ4UsYRXHCoCoP809J1nWfQ==",
       "requires": {
         "babel-runtime": "6.26.0"
       }

package.json

@@ -41,7 +41,7 @@
   ],
   "license": "Apache",
   "dependencies": {
-    "better-scroll": "^1.10.1"
+    "better-scroll": "^1.10.3"
   },
   "peerDependencies": {
     "vue": "^2.5.13"

src/common/lang/string.js

@@ -5,3 +5,8 @@ export function camelize (str) {
     return c ? c.toUpperCase() : ''
   })
 }
+
+export function kebab (str) {
+  str = String(str)
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+}

src/common/mixins/scroll.js

+export default {
+  props: {
+    // the options of BetterScroll
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  }
+}

src/components/index-list/index-list.vue

@@ -2,7 +2,7 @@
   <div class="cube-index-list">
     <cube-scroll
       ref="scroll"
-      :listen-scroll="listenScroll"
+      :scroll-events="scrollEvents"
       :options="options"
       :data="data"
       @scroll="scroll"
@@ -92,6 +92,7 @@
     },
     data() {
       return {
+        scrollEvents: ['scroll'],
         currentIndex: 0,
         scrollY: -1,
         diff: -1,
@@ -118,7 +119,6 @@
       }
     },
     created() {
-      this.listenScroll = true
       this.groupList = []
       this.listHeight = []
       this.touch = {}

src/components/scroll/scroll.vue

@@ -4,7 +4,11 @@
       <div ref="listWrapper" class="cube-scroll-list-wrapper">
         <slot>
           <ul class="cube-scroll-list">
-            <li @click="clickItem(item)" class="cube-scroll-item border-bottom-1px" v-for="item in data">{{item}}</li>
+            <li
+              class="cube-scroll-item border-bottom-1px"
+              v-for="(item, index) in data"
+              :key="index"
+              @click="clickItem(item)">{{item}}</li>
           </ul>
         </slot>
       </div>
@@ -45,7 +49,10 @@
   import BScroll from 'better-scroll'
   import Loading from '../loading/loading.vue'
   import Bubble from '../bubble/bubble.vue'
+  import scrollMixin from '../../common/mixins/scroll'
   import { getRect } from '../../common/helpers/dom'
+  import { camelize, kebab } from '../../common/lang/string'
+  import { tip } from '../../common/helpers/debug'
 
   const COMPONENT_NAME = 'cube-scroll'
   const DIRECTION_H = 'horizontal'
@@ -53,12 +60,16 @@
   const DEFAULT_REFRESH_TXT = 'Refresh success'
   const PULL_DOWN_ELEMENT_INITIAL_HEIGHT = -50
 
-  const EVENT_SCROLL = 'scroll'
-  const EVENT_BEFORE_SCROLL_START = 'before-scroll-start'
   const EVENT_CLICK = 'click'
   const EVENT_PULLING_DOWN = 'pulling-down'
   const EVENT_PULLING_UP = 'pulling-up'
 
+  const EVENT_SCROLL = 'scroll'
+  const EVENT_BEFORE_SCROLL_START = 'before-scroll-start'
+  const EVENT_SCROLL_END = 'scroll-end'
+
+  const SCROLL_EVENTS = [EVENT_SCROLL, EVENT_BEFORE_SCROLL_START, EVENT_SCROLL_END]
+
   const DEFAULT_OPTIONS = {
     observeDOM: true,
     click: true,
@@ -70,6 +81,7 @@
 
   export default {
     name: COMPONENT_NAME,
+    mixins: [scrollMixin],
     props: {
       data: {
         type: Array,
@@ -77,12 +89,18 @@
           return []
         }
       },
-      options: {
-        type: Object,
+      scrollEvents: {
+        type: Array,
         default() {
-          return {}
+          return []
+        },
+        validator(arr) {
+          return arr.every((item) => {
+            return SCROLL_EVENTS.indexOf(item) !== -1
+          })
         }
       },
+      // TODO: plan to remove at 1.10.0
       listenScroll: {
         type: Boolean,
         default: false
@@ -128,6 +146,15 @@
       refreshTxt() {
         const pullDownRefresh = this.pullDownRefresh
         return (pullDownRefresh && pullDownRefresh.txt) || DEFAULT_REFRESH_TXT
+      },
+      finalScrollEvents() {
+        const finalScrollEvents = this.scrollEvents.slice()
+
+        if (!finalScrollEvents.length) {
+          this.listenScroll && finalScrollEvents.push(EVENT_SCROLL)
+          this.listenBeforeScroll && finalScrollEvents.push(EVENT_BEFORE_SCROLL_START)
+        }
+        return finalScrollEvents
       }
     },
     watch: {
@@ -185,6 +212,7 @@
       this.$nextTick(() => {
         this.initScroll()
       })
+      this._checkDeprecated()
     },
     beforeDestroy() {
       this.destroy()
@@ -198,26 +226,13 @@
 
         let options = Object.assign({}, DEFAULT_OPTIONS, {
           scrollY: this.direction === DIRECTION_V,
-          scrollX: this.direction === DIRECTION_H
+          scrollX: this.direction === DIRECTION_H,
+          probeType: this.scrollEvents.indexOf(EVENT_SCROLL) !== -1 ? 3 : 1
         }, this.options)
 
-        if (this.listenScroll) {
-          options.probeType = 3
-        }
-
         this.scroll = new BScroll(this.$refs.wrapper, options)
 
-        if (this.listenScroll) {
-          this.scroll.on('scroll', (pos) => {
-            this.$emit(EVENT_SCROLL, pos)
-          })
-        }
-
-        if (this.listenBeforeScroll) {
-          this.scroll.on('beforeScrollStart', () => {
-            this.$emit(EVENT_BEFORE_SCROLL_START)
-          })
-        }
+        this._listenScrollEvents()
 
         if (this.pullDownRefresh) {
           this._onPullDownRefresh()
@@ -268,6 +283,13 @@
       resetPullUpTxt() {
         this.pullUpDirty = true
       },
+      _listenScrollEvents() {
+        this.finalScrollEvents.forEach((event) => {
+          this.scroll.on(camelize(event), (...args) => {
+            this.$emit(event, ...args)
+          })
+        })
+      },
       _calculateMinHeight() {
         if (this.$refs.listWrapper) {
           this.$refs.listWrapper.style.minHeight = this.pullDownRefresh || this.pullUpLoad ? `${getRect(this.$refs.wrapper).height + 1}px` : 0
@@ -323,6 +345,12 @@
           this.beforePullDown = true
           dirty && this.refresh()
         }, this.scroll.options.bounceTime)
+      },
+      _checkDeprecated() {
+        const deprecatedKeys = ['listenScroll', 'listenBeforeScroll']
+        deprecatedKeys.forEach((key) => {
+          this[key] && tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "scroll-events" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/scroll#cube-Propsconfiguration-anchor`, COMPONENT_NAME)
+        })
       }
     },
     components: {

src/components/slide/slide.vue

@@ -2,8 +2,12 @@
   <div class="cube-slide" ref="slide">
     <div class="cube-slide-group" ref="slideGroup">
       <slot>
-        <cube-slide-item v-for="(item, index) in data" :key="index" @click.native="clickItem(item, index)"
-                         :item="item"></cube-slide-item>
+        <cube-slide-item
+          v-for="(item, index) in data"
+          :key="index"
+          @click.native="clickItem(item, index)"
+          :item="item">
+        </cube-slide-item>
       </slot>
     </div>
     <div class="cube-slide-dots" v-if="showDots">
@@ -17,15 +21,27 @@
 <script type="text/ecmascript-6">
   import CubeSlideItem from './slide-item.vue'
   import BScroll from 'better-scroll'
+  import scrollMixin from '../../common/mixins/scroll'
+  import { tip } from '../../common/helpers/debug'
+  import { kebab } from '../../common/lang/string'
 
   const COMPONENT_NAME = 'cube-slide'
   const EVENT_CHANGE = 'change'
   const EVENT_SELECT = 'click'
+  const EVENT_SCROLL_END = 'scroll-end'
+
   const DIRECTION_H = 'horizontal'
   const DIRECTION_V = 'vertical'
 
+  const DEFAULT_OPTIONS = {
+    momentum: false,
+    click: true,
+    observeDOM: false
+  }
+
   export default {
     name: COMPONENT_NAME,
+    mixins: [scrollMixin],
     props: {
       data: {
         type: Array,
@@ -42,14 +58,6 @@
         type: Boolean,
         default: true
       },
-      autoPlay: {
-        type: Boolean,
-        default: true
-      },
-      interval: {
-        type: Number,
-        default: 4000
-      },
       threshold: {
         type: Number,
         default: 0.3
@@ -58,21 +66,30 @@
         type: Number,
         default: 400
       },
-      allowVertical: {
+      autoPlay: {
         type: Boolean,
-        default: false
+        default: true
       },
-      stopPropagation: {
+      interval: {
+        type: Number,
+        default: 4000
+      },
+      showDots: {
         type: Boolean,
-        default: false
+        default: true
       },
       direction: {
         type: String,
         default: DIRECTION_H
       },
-      showDots: {
+      // The props allowVertical, stopPropagation could be removed in next minor version.
+      allowVertical: {
         type: Boolean,
-        default: true
+        default: false
+      },
+      stopPropagation: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -82,9 +99,14 @@
       }
     },
     created() {
-      const needRefreshProps = ['data', 'loop', 'autoPlay', 'threshold', 'speed', 'allowVertical']
+      const needRefreshProps = ['data', 'loop', 'autoPlay', 'options.eventPassthrough', 'threshold', 'speed', 'allowVertical']
       needRefreshProps.forEach((key) => {
         this.$watch(key, () => {
+          // To fix the render bug when add items since loop.
+          if (key === 'data') {
+            this._destroy()
+          }
+
           /* istanbul ignore next */
           this.$nextTick(() => {
             this.refresh()
@@ -109,7 +131,7 @@
         if (this.slide === null) {
           return
         }
-        this.slide && this.slide.destroy()
+        this._destroy()
         clearTimeout(this._timer)
 
         if (this.slide) {
@@ -128,6 +150,9 @@
           this._play()
         }
       },
+      _destroy() {
+        this.slide && this.slide.destroy()
+      },
       _refresh() {
         this._updateSlideDom(true)
         this.slide.refresh()
@@ -154,21 +179,20 @@
       },
       _initSlide() {
         const eventPassthrough = this.direction === DIRECTION_H && this.allowVertical ? DIRECTION_V : ''
-        this.slide = new BScroll(this.$refs.slide, {
+
+        const options = Object.assign({}, DEFAULT_OPTIONS, {
           scrollX: this.direction === DIRECTION_H,
           scrollY: this.direction === DIRECTION_V,
-          momentum: false,
-          bounce: false,
           eventPassthrough,
           snap: {
             loop: this.loop,
             threshold: this.threshold,
             speed: this.speed
           },
-          stopPropagation: this.stopPropagation,
-          click: true,
-          observeDOM: false
-        })
+          stopPropagation: this.stopPropagation
+        }, this.options)
+
+        this.slide = new BScroll(this.$refs.slide, options)
 
         this.slide.goToPage(this.currentPageIndex, 0, 0)
 
@@ -190,12 +214,15 @@
         })
       },
       _onScrollEnd() {
-        let pageIndex = this.slide.getCurrentPage().pageX
+        const { pageX, pageY } = this.slide.getCurrentPage()
+        let pageIndex = this.direction === DIRECTION_H ? pageX : pageY
         if (this.currentPageIndex !== pageIndex) {
           this.currentPageIndex = pageIndex
-          this.$emit(EVENT_CHANGE, this.currentPageIndex)
+          this.$emit(EVENT_CHANGE, pageIndex)
         }
 
+        this.$emit(EVENT_SCROLL_END, pageIndex)
+
         if (this.autoPlay) {
           this._play()
         }
@@ -235,6 +262,12 @@
           }
           this._refresh()
         }, 60)
+      },
+      _checkDeprecated() {
+        const deprecatedKeys = ['allowVertical', 'stopPropagation']
+        deprecatedKeys.forEach((key) => {
+          this[key] && tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "options" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/slide#cube-Propsconfiguration-anchor`, COMPONENT_NAME)
+        })
       }
     },
     mounted() {
@@ -243,6 +276,8 @@
       })
 
       window.addEventListener('resize', this._resizeHandler)
+
+      this._checkDeprecated()
     },
     activated() {
       /* istanbul ignore next */
@@ -257,10 +292,9 @@
     },
     destroyed() {
       this._deactivated()
-      if (this.slide) {
-        this.slide.destroy()
+      this._destroy()
+
       this.slide = null
-      }
     },
     components: {
       CubeSlideItem

test/unit/specs/scroll.spec.js

@@ -291,25 +291,28 @@ describe('Scroll', () => {
     })
   })
 
-  it('should trigger other events', function (done) {
+  it('should trigger scroll events', function (done) {
     const scrollHandle = sinon.spy()
     const beforeScrollHandle = sinon.spy()
+    const scrollEndHandle = sinon.spy()
 
     vm = createScroll({
       data,
-      listenScroll: true,
-      listenBeforeScroll: true,
+      scrollEvents: ['scroll', 'before-scroll-start', 'scroll-end'],
       options: {
         pullUpLoad: true
       }
     }, {
       scroll: scrollHandle,
-      'before-scroll-start': beforeScrollHandle
+      'before-scroll-start': beforeScrollHandle,
+      'scroll-end': scrollEndHandle
     })
     vm.$refs.wrapper.style.height = '200px'
     vm.refresh()
 
     const listItem = vm.$el.querySelector('.cube-scroll-content li:nth-child(3)')
+
+    setTimeout(() => {
       dispatchSwipe(listItem, [
         {
           pageX: 10,
@@ -322,14 +325,55 @@ describe('Scroll', () => {
       ], 100)
 
       setTimeout(() => {
-      // TODO: why failed
-      // expect(scrollHandle)
-      //   .to.be.called
-      // expect(beforeScrollHandle)
-      //   .to.be.callCount(1)
+        expect(scrollHandle).to.be.called
+        expect(beforeScrollHandle).to.be.callCount(1)
+        expect(scrollEndHandle).to.be.callCount(1)
 
         done()
-    }, 400)
+      }, 1500)
+    }, 100)
+  })
+
+  it('should not trigger scroll events', function (done) {
+    const scrollHandle = sinon.spy()
+    const beforeScrollHandle = sinon.spy()
+    const scrollEndHandle = sinon.spy()
+
+    vm = createScroll({
+      data,
+      options: {
+        pullUpLoad: true
+      }
+    }, {
+      scroll: scrollHandle,
+      'before-scroll-start': beforeScrollHandle,
+      'scroll-end': scrollEndHandle
+    })
+    vm.$refs.wrapper.style.height = '200px'
+    vm.refresh()
+
+    const listItem = vm.$el.querySelector('.cube-scroll-content li:nth-child(3)')
+
+    setTimeout(() => {
+      dispatchSwipe(listItem, [
+        {
+          pageX: 10,
+          pageY: 200
+        },
+        {
+          pageX: 10,
+          pageY: 10
+        }
+      ], 100)
+
+      setTimeout(() => {
+        expect(scrollHandle).to.be.callCount(0)
+        expect(beforeScrollHandle).to.be.callCount(0)
+        expect(scrollEndHandle).to.be.callCount(0)
+
+        done()
+      }, 1500)
+    }, 100)
   })
 
   it('should call correct method', function () {

test/unit/specs/slide.spec.js

@@ -94,12 +94,13 @@ describe('Slide.vue', () => {
     })
   })
 
-  it('should trigger change event', function (done) {
+  it('should trigger events', function (done) {
     this.timeout(10000)
     const changeHandler = sinon.spy()
+    const scrollEndHandler = sinon.spy()
     vm = createVue({
       template: `
-      <cube-slide :interval="interval" @change="change" style="width:300px;height:100px;">
+      <cube-slide :interval="interval" @change="change" @scroll-end="scrollEnd" style="width:300px;height:100px;">
         <cube-slide-item v-for="(item,index) in items" :key="index" :item="item"></cube-slide-item>
       </cube-slide>
     `,
@@ -108,14 +109,14 @@ describe('Slide.vue', () => {
         interval: 1000
       },
       methods: {
-        change() {
-          changeHandler()
-        }
+        change: changeHandler,
+        scrollEnd: scrollEndHandler
       }
     })
     setTimeout(() => {
       // auto change
-      expect(changeHandler).to.be.calledOnce
+      expect(changeHandler).to.be.callCount(1)
+      expect(scrollEndHandler).to.be.callCount(1)
       dispatchSwipe(vm.$el, [
         {
           pageX: 180,
@@ -127,12 +128,54 @@ describe('Slide.vue', () => {
         }
       ], 100)
       setTimeout(() => {
-        expect(changeHandler).to.be.calledTwice
+        expect(changeHandler).to.be.callCount(2)
+        expect(scrollEndHandler).to.be.callCount(2)
         done()
       }, 600)
     }, 2000)
   })
 
+  it('should trigger scroll-end but without change', function (done) {
+    this.timeout(10000)
+    const changeHandler = sinon.spy()
+    const scrollEndHandler = sinon.spy()
+    vm = createVue({
+      template: `
+      <cube-slide :autoPlay="autoPlay" :threshold="threshold" @change="change" @scroll-end="scrollEnd" style="width:300px;height:100px;">
+        <cube-slide-item v-for="(item,index) in items" :key="index" :item="item"></cube-slide-item>
+      </cube-slide>
+    `,
+      data: {
+        items,
+        autoPlay: false,
+        threshold: 0.9
+      },
+      methods: {
+        change: changeHandler,
+        scrollEnd: scrollEndHandler
+      }
+    })
+
+    setTimeout(() => {
+      dispatchSwipe(vm.$el, [
+        {
+          pageX: 180,
+          pageY: 20
+        },
+        {
+          pageX: 10,
+          pageY: 20
+        }
+      ], 100)
+      setTimeout(() => {
+        expect(scrollEndHandler).to.be.callCount(1)
+        expect(changeHandler).to.be.callCount(0)
+
+        done()
+      }, 2000)
+    }, 100)
+  })
+
   it('should go to right pageIndex if set initialIndex', function (done) {
     vm = createVue({
       template: `