Vue Awesome Swiper文档详解

发布时间：2023-05-17

Vue Awesome Swiper 使用详解

Vue Awesome Swiper 是一个 Vue 的轮播组件库，使用它可以很方便地创建各种轮播效果，如切换效果、分页、导航按钮、动态添加 slide 等。官方文档详细介绍了组件的使用方法、属性、事件等，下面从多个方面对 Vue Awesome Swiper 文档做详细阐述。

一、安装和基本使用

  1. 首先需要安装 Vue Awesome Swiper： 
    npm install vue-awesome-swiper --save
  2. 然后在您的 main.js 或其他入口文件中全局注册它： 
    import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 如果您需要使用 CSS 样式
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
  3. 在 Vue 组件中使用： 
    <template>
  <div class="home">
    <swiper :options="swiperOption">
      <swiper-slide v-for="n in 3" :key="n"></swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swiperOption: {
        direction: 'vertical',
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>

在上面的例子中，我们使用 vue-awesome-swiper 版的 Swiper 轮播库创建了一个简单的轮播效果，通过 data 对象的 swiperOption 属性设置 Swiper 轮播库的参数，然后在 Swiper 组件中使用 swiperOption 参数创建 Swiper 轮播。

二、Swiper 组件的属性和事件

1. Swiper 组件的属性

下面是 Swiper 组件的一些常用属性，可以在 swiperOption 对象中进行设置：

  • initialSlide: number：默认初始幻灯片索引
  • direction: string：swiper 滑动方向，可设置为 horizontal、vertical
  • speed: number：滑动速度，即切换动画的速度
  • autoplay: boolean/object：是否自动播放。为 false 表示不自动播放，true 则设置切换时间；object 则设置 autoplay 的参数
  • pagination: object/string：分页器，可以设置分页器的类型为 bullets、fraction、progress 等。可以设置一个类名绑定到 pagination 属性成为自定义分页的容器，所有 sort 的子元素都将成为该分页器的其中一个分页。点击分页器进行切换
  • navigation: object：前进后退按钮，默认值为 false 表示不要这样的按钮。可以设置 nextEl、prevEl 两个属性获取 DOM 对象来控制切换
  • loop: boolean：是否循环轮播
  • preloadImages: boolean：是否开启所有图片预加载方式
  • lazy: object：开启 Swiper 懒加载，可以设置 preloaderClass、loadingClass、loadedClass、loadPrevNext、loadPrevNextAmount、loadOnTransitionStart、elementClass、threshold 等参数
  • keyboard: boolean：开启键盘控制
  • slidesPerView: number：每页的 Slide 数量。可以设置为 auto 自动根据 Swiper 容器尺寸计算数量，或者具体的数字
  • slidesPerColumn: number：分成多少列

2. Swiper 组件的事件

下面是绑定在 Swiper 组件上的一些事件：

  • init：当 Swiper 初始化之后执行的回调函数
  • slideChange：当 Slide 切换结束后执行的回调函数，即回调函数在用户双击或使用键盘导航键（上下左右方向键）触发弹出之前触发
  • slideChangeTransitionEnd：当 Slide 切换完成后执行的回调函数
  • slidePrevTransitionEnd：切换从前一个到当前（上一个）Slide
  • slideNextTransitionEnd：当切换从下一个到当前（下一个）幻灯片时显示的调用函数
  • sliderMove：滑动 Swiper 或拖动 Swiper 时执行的回调函数
  • transitionStart：当切换 Slide 时触发此回调函数。可以使用 slideChange 触点轮廓，而无需考虑是否当前为手动切换。触点轮廓长度为 Smooth 时长
  • transitionEnd：当切换幻灯片（Slide）的过渡效果完成时触发此回调函数

三、Swiper-slide 组件的属性和事件

1. Swiper-slide 组件的属性

下面是 Swiper-slide 组件常用的一些属性：

  • graggable: boolean：是否允许滑动
  • zoom: boolean：是否允许缩放
  • zoomMax: number：缩放最大值
  • zoomToggle: boolean：设置是否允许使用双指触摸缩放
  • flexbox: boolean：控制 flexbox 容器水平或垂直方向
  • hideOnClick: boolean：设置是否在单击时隐藏
  • preventClicks: boolean：为有意点击而不滑动轮播的寄存器
  • preventClicksPropagation: boolean：设置为 false 作为消除仓库单单击不会传播到 swiper 容器
  • slideToClickedSlide: boolean：单击幻灯片时自动滑动到该幻灯片
  • visibilityFullFit: boolean：使内容适合其容器（默认为“重新计算阀门”）

2. Swiper-slide 组件的事件

绑定在 Swiper-slide 组件上的事件：

  • beforeSlideEnter：在幻灯片进入之前执行的回调函数，进入成功则传入该 slide 的实例
  • slideEnter：在幻灯片进入后执行的回调函数，进入成功则传入该 slide 的实例
  • slideAfterChange：幻灯片切换结束后执行的回调函数
  • slideBeforeChange：幻灯片切换之前的回调函数

四、Swiper 的其他配置

1. 设置 Swiper 初始值

当组件已经加载并且你想设置滑动到某一个位置时，可以通过使用 update 函数实现：

<script>
export default {
  mounted () {
    this.$nextTick(function () {
      this.$refs.mySwiper.update() // 强制 swiper 更新
      this.$refs.mySwiper.slideTo(2, 1000) // 滑动到第二个
    })
  }
}
</script>

2. Swiper 的不同遮罩效果

你可以在建立 Swiper 实例时添加自己的自定义遮罩效果：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in images" :key="`item-${index}`">
        <div class="mask">
          <h2 id="title-1">类名遮罩()</h2>
          <p>基于最新构建，上面示例的图片可以看出遮罩层很柔和。通过这个例子，您可以尝试为自己的 Swiper 设置不同的遮罩层，实现不同的效果。</p>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<style>
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);
  text-align: center;
  color: #fff;
  z-index: 1; 
  display: flex;
  flex-direction: column;
}
</style>

3. 深度修改自定义组件样式

你可以修改 Swiper 组件内的某些元素的样式，首先在父组件中建立子组件 SwiperSlide，然后重写样式：

<template>
  <swiper :options="swiperOption">
    <swiper-slide :class="['swiper-slide', item.scoreClass]" v-for="item in items" :key="`idx-${item.id}`">
      <div class="score">
        <div class="red" :style="{ width: item.score * 20 + '%' }">
          <span>★</span>
          <span>★</span>
          <span>★</span>
          <span>★</span>
          <span>★</span>
        </div>
        <div class="gray">
          <span>★</span>
          <span>★</span>
          <span>★</span>
          <span>★</span>
          <span>★</span>
        </div>
      </div>
      <div class="btn">
        <p>点击更多</p>
      </div>
    </swiper-slide>
  </swiper>
</template>
<style>
.score {
  width: 80%;
  height: 20px;
  margin: 0 auto;
  position: relative;
}
.score .red {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f40;
}
.score .red span {
  display: inline-block;
  font-size: 16px;
  color: #fff;
  width: 20%;
  text-align: center;
}
.score .gray span {
  display: inline-block;
  font-size: 16px;
  color: #ccc;
  width: 20%;
  text-align: center;
}
.btn {
  width: 40%;
  height: 30px;
  margin: 10px auto;
  padding: 5px 0;
  text-align: center;
  border-radius: 15px;
  background-color: #f40;
  color: #fff;
}
.btn p {
  margin: 0;
}
</style>

五、总结

Vue Awesome Swiper 是一个功能丰富的轮播组件库，可以快速实现各种轮播效果。本文就它的安装、基本使用、Swiper 组件的属性和事件、Swiper-slide 组件的属性和事件以及 Swiper 的其他配置等方面展开了详细的介绍。希望本文可以帮助大家掌握 Vue Awesome Swiper 的使用方法。

推荐文章