最近开发pc官网，用到了轮播图，在这里记录一下使用过程中遇到的问题。
之前用jquery开发项目的时候，用的是swiper3。现在用vue开发，我一开始尝试用了最新的swiper6，我把官网的demo里的代码复制过来，结果发现要不是下标小圆点失效，要不就是切换功能失效，不知道问题出在哪里。搞了很久，最后用了swiper3的使用方法。
轮播图引入的版本是"vue-awesome-swiper": "^2.6.7",
main.js里面写的是
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)HTML内容：
<swiper v-if="ListBanner.length" :options="swiperOption" class="swiper-container swiper-container1 wow fadeInUp"
ref="mySwiper">
<!-- slides -->
<swiper-slide class="swiper-item" v-for="(item, index) of ListBanner" :key="index">
<img class="swiper-img" :src="item.banner" alt="" />
</swiper-slide>
<!-- Optional controls ,显示小点-->
<div class="swiper-pagination" slot="pagination" v-if="ListBanner.length > 1"></div>
<!-- 左右切换 -->
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>data里的配置：
swiperOption: {
// 参数选项,显示小点
pagination: ".swiper-pagination",
paginationClickable: true,
//循环
loop: true,
//每张播放时长3秒，自动播放
autoplay: 2000,
// 用户操作swiper之后，是否禁止autoplay
autoplayDisableOnInteraction: false,
//滑动速度
speed: 1000,
// delay:1000
prevButton: ".swiper-button-prev",
nextButton: ".swiper-button-next",
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
onSlideChangeStart: function (swiper) {
that.active = swiper.realIndex;
// this.realIndex + 1
// console.log(swiper.realIndex);
},
},computed里的配置（我写的代码也参考了好多其他前辈的代码，我觉得写得挺好的）
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},然后下面就可以使用了，因为我的轮播图图片是ajax请求回来的，所以需要在轮播图的容器上写一个判断
否则会出现页面加载完成轮播图会滚动到最后一张的bug。
然后我这边还有一个需求，只有图片大于一张才会自动轮播，所以代码要填加一下：
mounted里的：
Home().then((response) => {
console.log(response.data, "Home");
if (response.data.ReturnCode == 0) {
if (response.data.Data) {
var data = response.data.Data;
this.ListBanner = data[0].ListBanner;
// this.ListNews = data[0].ListNews;
this.ListPhysician = data[0].ListPhysician;
this.$nextTick(() => {
if (this.ListBanner.length <= 1) {
this.swiper.stopAutoplay();
this.swiper.lockSwipes();
}
if (this.ListPhysician.length <= 1) {
this.swiper3.stopAutoplay();
this.swiper3.lockSwipes();
}
this.wowFun();
});
// console.log(this.ListNews);
// new WOW().init();
}
}
});
一定要放在this.$nextTick里的判断才会生效。
this.swiper.stopAutoplay();是停止自动轮播
this.swiper.lockSwipes();是禁止滑动
如果不显示小圆点和左右切换，加上v-if="ListBanner.length > 1"就可以了。
如果要实现时间控制轮播图轮播图，如图:
swiperOption: {
// 参数选项,显示小点
pagination: ".swiper-pagination",
paginationClickable: true,
//循环
loop: true,
//每张播放时长3秒，自动播放
autoplay: 2000,
// 用户操作swiper之后，是否禁止autoplay
autoplayDisableOnInteraction: false,
//滑动速度
speed: 1000,
// delay:1000
prevButton: ".swiper-button-prev",
nextButton: ".swiper-button-next",
onSlideChangeStart: function (swiper) {
that.active = swiper.realIndex;
// this.realIndex + 1
// console.log(swiper.realIndex);
},
},事件写在onSlideChangeStart里面
控制轮播图的滚动写在：methods里面(didi是我随便起的名字，是那个点击时间日期的事件)：
didi(index) {
this.active = index;
this.swiper.slideTo(index + 1, 1000, false);
},这是我首页轮播图配置的全部代码（不相关的删掉了一些）：
<template>
<div class="index">
<commonHeader></commonHeader>
<!-- <router-link to="/a">
<p>跳转a页面</p>
</router-link>
<router-link to="/b">
<p>跳转b页面</p>
</router-link> -->
<!-- <p>我是首页</p> -->
<!-- isKeep -->
<swiper v-if="ListBanner.length" :options="swiperOption" class="swiper-container swiper-container1 wow fadeInUp"
ref="mySwiper">
<!-- slides -->
<swiper-slide class="swiper-item" v-for="(item, index) of ListBanner" :key="index">
<img class="swiper-img" :src="item.banner" alt="" />
</swiper-slide>
<!-- Optional controls ,显示小点-->
<div class="swiper-pagination" slot="pagination" v-if="ListBanner.length > 1"></div>
<!-- 左右切换 -->
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
<!-- <div class="banner" v-if="ListBanner.length == 1">
<img class="banner-img" :src="ListBanner[0].banner" alt="">
</div> -->
<commonFooter></commonFooter>
</div>
</template>
<script>
// ajax
import { Home, NewsListTop } from "@/assets/js/api";
// vuex
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
// import { Swiper, SwiperItem } from 'vux'
import commonHeader from "@/components/header";
import commonFooter from "@/components/footer";
import { WOW } from "wowjs";
export default {
name: "home",
components: {
commonHeader,
commonFooter,
},
data() {
const that = this;
return {
// 轮播图
ListBanner: [],
// 新闻
ListNews: [],
// 名医荟萃
ListPhysician: [],
swiperOption: {
// 参数选项,显示小点
pagination: ".swiper-pagination",
paginationClickable: true,
//循环
loop: true,
//每张播放时长3秒，自动播放
autoplay: 2000,
// 用户操作swiper之后，是否禁止autoplay
autoplayDisableOnInteraction: false,
//滑动速度
speed: 1000,
// delay:1000
prevButton: ".swiper-button-prev",
nextButton: ".swiper-button-next",
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
onSlideChangeStart: function (swiper) {
that.active = swiper.realIndex;
// this.realIndex + 1
// console.log(swiper.realIndex);
},
},
// isKeep: true,
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
methods: {
// didi(index) {
// this.active = index;
// this.swiper.slideTo(index + 1, 1000, false);
// },
enter() {
// alert(1)
this.swiper2.stopAutoplay();
},
leave() {
this.swiper2.startAutoplay();
},
// wow动画
wowFun() {
var wow = new WOW({
// 距离可视区域多少开始执行动画
offset: 150,
// 异步加载的内容是否有效
live: true,
});
wow.init();
},
},
created() { },
mounted() {
console.log(document.documentElement.scrollTop)
Home().then((response) => {
console.log(response.data, "Home");
if (response.data.ReturnCode == 0) {
if (response.data.Data) {
var data = response.data.Data;
this.ListBanner = data[0].ListBanner;
// this.ListNews = data[0].ListNews;
this.ListPhysician = data[0].ListPhysician;
this.$nextTick(() => {
if (this.ListBanner.length <= 1) {
this.swiper.stopAutoplay();
this.swiper.lockSwipes();
}
if (this.ListPhysician.length <= 1) {
this.swiper3.stopAutoplay();
this.swiper3.lockSwipes();
}
this.wowFun();
});
// console.log(this.ListNews);
// new WOW().init();
}
}
});
},
activated() {
},
deactivated() {
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/home.scss";
</style>这是我在vue中使用轮播图遇到的一些问题，希望能帮到需要的人。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。