基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子

直接上源码：

组件：scroll.vue，需要先npm install better-scroll

<template>  <div ref="wrapper">    <slot></slot>  </div></template><script type="text/ecmascript-6">  import BScroll from 'better-scroll'  const DIRECTION_H = 'horizontal'  const DIRECTION_V = 'vertical'  export default {    props: {      probeType: {        type: Number,        default: 1      },      click: {        type: Boolean,        default: false      },      listenScroll: {        type: Boolean,        default: false      },      data: {        type: Array,        default: null      },      pullup: {        type: Boolean,        default: false      },      beforeScroll: {        type: Boolean,        default: false      },      refreshDelay: {        type: Number,        default: 20      },      direction: {        type: String,        default: DIRECTION_V      }    },    mounted() {      setTimeout(() => {        this._initScroll()      }, 20)    },    methods: {      _initScroll() {        if (!this.$refs.wrapper) {          return        }        this.scroll = new BScroll(this.$refs.wrapper, {          probeType: this.probeType,          click: this.click,          eventPassthrough: this.direction === DIRECTION_V ? DIRECTION_H : DIRECTION_V        })        if (this.listenScroll) {          this.scroll.on('scroll', (pos) => {            this.$emit('scroll', pos)          })        }        if (this.pullup) {          this.scroll.on('scrollEnd', () => {            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {              this.$emit('scrollToEnd')            }          })        }        if (this.beforeScroll) {          this.scroll.on('beforeScrollStart', () => {            this.$emit('beforeScroll')          })        }      },      disable() {        this.scroll && this.scroll.disable()      },      enable() {        this.scroll && this.scroll.enable()      },      refresh() {        this.scroll && this.scroll.refresh()      },      scrollTo() {        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)      },      scrollToElement() {        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)      }    },    watch: {      data() {        setTimeout(() => {          this.refresh()        }, this.refreshDelay)      }    }  }</script><style scoped lang="stylus" rel="stylesheet/stylus"></style>

应用方法：

引入并注册组件：

  import Scroll from 'base/scroll/scroll'  export default {    components: {      Scroll    }  }

template结构以及style：

效果：图中轮播图+列表为滚动区域（recommend-content），即需要滚动的内容；对应的class：slider为轮播图，recommend-list为列表。由于轮播图数据以及list数据为动态获取，实际使用请填充你的数据，以上只给出关键结构。

已实现滚动：