最近开发pc官网，用到了轮播图，在这里记录一下应用过程中遇到的问题。
之前用jquery开发我的项目的时候，用的是swiper3。当初用vue开发，我一开始尝试用了最新的swiper6，我把官网的demo里的代码复制过去，后果发现要不是下标小圆点生效，要不就是切换性能生效，不晓得问题出在哪里。搞了很久，最初用了swiper3的应用办法。
轮播图引入的版本是"vue-awesome-swiper": "^2.6.7",
main.js外面写的是
import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport '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中应用轮播图遇到的一些问题，心愿能帮到须要的人。