npm 包 @better-scroll/slide 使用教程

在前端的开发中，我们经常需要开发一些具有滑动、轮播等交互效果的功能，这些功能通常需要用到一个轮播插件来实现。而 @better-scroll/slide 就是一个专业的基于 BetterScroll 的轮播组件。

@better-scroll/slide 的安装

在开始使用 @better-scroll/slide 插件之前，我们需要将它安装到我们的项目中。可以使用 npm 来进行安装：

npm install @better-scroll/slide

安装完成后，我们就可以在项目中使用这个插件了。

@better-scroll/slide 的使用

@better-scroll/slide 是建立在 BetterScroll 之上的，所以我们需要先引入 BetterScroll 插件：

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

接下来我们需要先创建一个容器元素，例如一个 div 元素，然后将其封装成一个 BetterScroll 实例：

const wrapper = document.querySelector('.wrapper')
const scroll = new BScroll(wrapper, {
  scrollX: true,
  scrollY: false,
  slide: {
    autoplay: true
  }
})

在创建 BetterScroll 实例时，我们需要为其添加一个 slide 属性，这个属性的值是一个对象，对象中可以添加很多参数，例如 autoplay 自动播放、loop 循环播放、threshold 滑动阀值等。

而为了实现轮播功能，我们还需要在容器元素内部添加一个 class 为 slide-group 的元素：

<div class="wrapper">
  <div class="slide-group">
    <div class="slide-item">1</div>
    <div class="slide-item">2</div>
    <div class="slide-item">3</div>
  </div>
</div>

在容器元素内部添加了 slide-group 类之后，我们就可以对其进行初始化了：

scroll.setPlugins([Slide])

通过 setPlugins 方法，我们可以将 @better-scroll/slide 插件添加到 BetterScroll 实例中。

@better-scroll/slide 的参数

@better-scroll/slide 插件支持很多参数来进行配置，下面我们来介绍一下这些参数：

autoplay

我们在创建 BetterScroll 实例时，可以设置 autoplay 参数来自动播放轮播图：

const scroll = new BScroll(wrapper, {
  scrollX: true,
  scrollY: false,
  slide: {
    autoplay: true
  }
})

loop

设置 loop 参数以实现无限循环播放：

const scroll = new BScroll(wrapper, {
  scrollX: true,
  scrollY: false,
  slide: {
    loop: true
  }
})

threshold

设置 threshold 参数以调整滑动阀值，当用户滑动距离大于该值时才会触发轮播：

const scroll = new BScroll(wrapper, {
  scrollX: true,
  scrollY: false,
  slide: {
    threshold: 50
  }
})

@better-scroll/slide 的事件

@better-scroll/slide 插件还支持很多事件，我们可以通过 on 方法来添加事件监听器：

scroll.on('slideWillChange', function (page) {
  console.log('即将切换到第' + page + '页')
})

slideWillChange

该事件会在轮播切换之前触发。

slidePageChanged

该事件会在轮播切换之后触发。

示例代码

下面是一个完整的 @better-scroll/slide 示例代码：

<div class="wrapper">
  <div class="slide-group">
    <div class="slide-item">1</div>
    <div class="slide-item">2</div>
    <div class="slide-item">3</div>
  </div>
</div>

-- -------------------- ---- -------
------ ------- ---- ---------------------
------ ----- ---- ----------------------

----- ------- - ----------------------------------
----- ------ - --- ---------------- -
  -------- -----
  -------- ------
  ------ -
    --------- ----
  -
--
--------------------------

---------------------------- -------- ------ -
  -------------------- - ---- - ----
--

----------------------------- -------- ------ -
  -------------------- - ---- - ----
--

总结

通过本篇文章的介绍，我们了解了 @better-scroll/slide 插件的安装、使用、参数以及事件等相关知识。在实际开发中，我们可以根据自己的需求来灵活地使用这个插件，为项目带来更优秀的交互效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6e9999a9b7065299ccb9f9