基于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）

js

css(stylus)

效果图