共计 5702 个字符，预计需要花费 15 分钟才能阅读完成。
最近开发 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 中应用轮播图遇到的一些问题，心愿能帮到须要的人。
正文完