1.下载
npm i vue-awesome-swiper --save
2. 在需要的组件中引用样式文件和插件封装的组件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
components: {
swiper,
swiperSlide
},
3. 使用插件自带的组件
<!-- options swiper的配置参数 -->
<swiper :options="swiperOption" ref="swiperOption" id="swiper" >
<!-- swiper内容区域 -->
<swiper-slide v-for="(item,inds) in swiperlist" :key="inds">
<img :src="item.image" :title="item.title" alt="" />
</swiper-slide>
<!-- 分页 -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- 上下页 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
4. 在script中添加swiper配置
如果需要更多配置,官网配置地址
export default {
name: "swiper_home",
props:["swiperlist"],
data() {
return {
// swiper的配置
swiperOption: {
loop: true,
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 分页配置
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
paginationHide:true
},
// 上下页配置
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}
}
};
遇到的小坑
-loop不生效
加入下面属性可以解决
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
并在swiper组件上加入判断 v-if="swiperlist.length>0"