vue中swiper初始化问题_vue中使用vue-awesome-swiper遇到的一些问题

最近开发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-slide>

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); },

这是我首页轮播图配置的全部代码(不相关的删掉了一些)：

commonHeader> swiper-slide>

div> swiper> commonFooter>

div>

template>

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>

这是我在vue中使用轮播图遇到的一些问题，希望能帮到需要的人。

文章来源: segmentfault.com，作者：我的一个道姑朋友，版权归原作者所有，如需转载，请联系作者。

原文链接：segmentfault.com/a/1190000037561952