vue-awesome-swiper的使用网上教程看似简单,但是由于组件并不是类似element UI等人人皆知,因此难免遇上问题且百度与自己实际问题存在出入的情况。总体实现是较为简单的,但是我在使用过程中主要的问题在于组件版本的问题,由于vue-awesome-swiper的版本与vue版本适配存在问题,导致组件虽能正常显示但是具体autoplay等功能均无法正常使用。
针对组件的具体实现属性等可查询:
1. 实现样式展示及源码
2. 组件官方配置详解
简述一下本次使用:
根据自身Vue版本下载相应合适版本,作为参考本次使用的Vue版本为 2.6.10
需注意在下载完后务必要去node_modules中确认swiper的版本,不同版本的swiper配置等存在差异,本次使用的swiper为"^5.4.5"
npm install vue-awesome-swiper@3 --save-dev
下载完成后在 main.js 内引入相关资源:
import vueSwiper from 'vue-awesome-swiper' // 引入轮播图组件
Vue.use(vueSwiper) // Vue实现组件的安装和注册
在需要使用的页面中引入相应组件与其相关样式:
import {swiper, swiperSlide} from "vue-awesome-swiper";
//引入样式(也可在main.js中全局引入,根据项目需求可自行灵活设置)
import 'swiper/css/swiper.css'
注册组件并使用:
components: { // 注册相应组件
swiper,
swiperSlide
},
data() {
const that = this
return{
// 项目图片地址
commodity: [
// 下面针对使用项目内已包含的静态图片地址提供了两种调用方式,建议使用第二种
"http://localhost:9528/static/img/part2-aboutUs-pic.55febb5c.png",
require("../../assets/aboutUs-content-pic1.png")
],
swiperOption: {
//是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
notNextTick: true,
//循环
loop: true,
//设定初始化时slide的索引
initialSlide: 0,
//自动播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
//滑动速度
speed: 800,
//滑动方向
direction: "horizontal",
//小手掌抓取滑动
grabCursor: true,
//滑动之后回调函数
on: {
slideChangeTransitionStart: function () {
//获取轮播图片下标索引;这里有一个坑,之前网上找到的是用activeIndex,但后来网上说的是这个realIndex,原来activeIndex是swiper2.0的;而realIndex是swiper3.0的,(使用realIndex才实现了下标索引)
that.imgIndex = this.realIndex + 1;
},
},
// 对于使用的小组件一定要进行注册,否则无法使用
// 左右页面跳转按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 分页器设置
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets",
},
},
}
}
html部分写的比较粗糙,仅举个例子:
<div style="position: relative">
<swiper
class="swiImgs"
:options="swiperOption"
v-if="commodity.length != 0"
>
<swiperSlide
v-for="(item, index) in commodity"
data-index="index"
:key="index"
class="item"
>
<!-- 点击事件按需编写,再此就不再过多赘述 -->
<img class="swiImg" :src= item @click="imgClick" />
</swiperSlide>
<!-- 下一页 -->
<div class="swiper-button-next" slot="button-prev"></div>
<!-- 上一页 -->
<div class="swiper-button-prev" slot="button-next"></div>
<!-- 分页器 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>