基于vue+better-scroll的轮播图

安装

npm install @better-scroll/slide@next --save

使用

你需要首先引入 slide 插件，并通过全局方法 BScroll.use() 使用

import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'

BScroll.use(Slide)

上面步骤完成后，BScroll 的 options 中传入 slide 相关的配置后便可使用 slide。

new BScroll('.bs-wrap', {
    scrollX: true,
    scrollY: false,
    slide: {
      loop: true,
      threshold: 100
    },
    momentum: false,
    bounce: false,
    stopPropagation: true
  })

slide的相关配置

• slide

  slide 相关的配置。需要设置 slide 的值为一个具体的对象，来开启 slide 效果。更多详细配置，请参考slide 配置。

• scrollX

  当值为 true 时，设置 slide 的方向为 X 方向。

• scrollY

  当值为 true 时，设置 slide 的方向为 Y 方向。 注意: scrollX 和 scrollY 不能同时设置为 true

• momentum

  当使用 slide 时，这个值需要设置为 false，用来避免惯性动画带来的快速滚动时的闪烁问题。

• bounce

  当你设置了 slide.loop 为 true 时，bounce 值需要设置为 false，否则会在循环衔接的时候出现闪烁。

• probeType

  如果你想通过监听 slideWillChange 事件，在用户拖动 slide 时，实时获取到 slide 的页面 index 的改变，需要设置 probeType 值为 2 或者 3fdsa

例子

templete代码（vue）

<template>
  <div class="slide-banner">
    <div class="banner-wrapper">
      <div class="slide-banner-scroll" ref="slide">
        <div class="slide-banner-wrapper">
          <div class="slide-item page1">page 1</div>
          <div class="slide-item page2">page 2</div>
          <div class="slide-item page3">page 3</div>
          <div class="slide-item page4">page 4</div>
        </div>
      </div>
      <div class="docs-wrapper">
        <span
          class="doc"
          v-for="(item, index) in 4"
          :key="index"
          :class="{'active': currentPageIndex === index}"></span>
      </div>
    </div>
    <div class="btn-wrap">
      <button class="next" @click="nextPage">nextPage</button>
      <button class="prev" @click="prePage">prePage</button>
    </div>
  </div>
</template>

js

<script type="text/ecmascript-6">
  import BScroll from '@better-scroll/core'
  import Slide from '@better-scroll/slide'

  BScroll.use(Slide)

  export default {
    data() {
      return {
        slide: null,
        currentPageIndex: 0,
        playTimer: 0
      }
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      clearTimeout(this.playTimer)
      this.slide.destroy()
    },
    methods: {
      init() {
        clearTimeout(this.playTimer)
        this.slide = new BScroll(this.$refs.slide, {
          scrollX: true,//设置可以横向滚动
          scrollY: false,//竖向滚动 
          slide: {
            loop: true,//是否自动播放
            threshold: 100
          },
          useTransition: true,
          momentum: false,
          bounce: false,
          stopPropagation: true,
          probeType: 2
        })
        this.slide.on('scrollEnd', this._onScrollEnd)

        // user touches the slide area
        this.slide.on('beforeScrollStart', () => {
          clearTimeout(this.playTimer)
        })
        // user touched the slide done
        this.slide.on('scrollEnd', () => {
          this.autoGoNext()
        })
        this.slide.on('slideWillChange', (page) => {
          this.currentPageIndex = page.pageX
        })
        this.autoGoNext()
      },
      nextPage() {
        this.slide.next()
      },
      prePage() {
        this.slide.prev()
      },
      _onScrollEnd() {
        this.autoGoNext()
      },
      autoGoNext() {
        clearTimeout(this.playTimer)
        this.playTimer = setTimeout(() => {
          this.nextPage()
        }, 4000)
      }
    }
  }
</script>

css(stylus)

<style lang="stylus" rel="stylesheet/stylus">

.slide-banner
  .banner-wrapper
    position relative
  .slide-banner-scroll
    min-height 1px
    overflow hidden
  .slide-banner-wrapper
    height 200px
    white-space nowrap
    font-size 0
    .slide-item
      display inline-block
      height 200px
      width 100%
      line-height 200px
      text-align center
      font-size 26px
      &.page1
        background-color #95B8D1
      &.page2
        background-color #DDA789
      &.page3
        background-color #C3D899
      &.page4
        background-color #F2D4A7
  .docs-wrapper
    position absolute
    bottom 4px
    left 50%
    transform translateX(-50%)
    .doc
      display inline-block
      margin 0 4px
      width 8px
      height 8px
      border-radius 50%
      background #eee
      &.active
        width 20px
        border-radius 5px
  .btn-wrap
    margin-top 20px
    display flex
    justify-content center
    button
      margin 0 10px
      padding 10px
      color #fff
      border-radius 4px
      background-color #666

</style>

效果图