解决vue中使用swiper无法自动循环播放问题

vue中使用swiper无法自动循环播放

首先，使用mockjs生成模拟数据，如下

（1）安装swiper

npm install swiper

(2) 引入swiper

import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

（3）在methods里面创建一个swiper初始化函数carouselScroll，关于swiper中的 observeParents和observer见官网swiper，observe：当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。observeParents：将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。

carouselScroll(){
                let mySwiper = new Swiper(".swiper-container",{
                    direction:"horizontal",/*横向滑动*/
                    loop:true,
                    autoplay: {
                        disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay （没有加入之前轮播图设置 autoplay：true无效）
                        delay: 2000, // 自动切换的时间间隔（单位ms）
                    },
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    observeParents:false,   //必须加入
                    observer:true, //必须加入
                });
            },

（4）在mounted中调用,详解见官网vm.$nextTick,个人理解就是当有DOM更新的时候就要使用这个。

 mounted() {
            //获取轮播图
            this.$http.get('api/carousel').then(res=>{
                this.carouselList=res.data.carouselList.data;
                //console.log(res.data.carouselList);
                this.$nextTick(function () {  //l轮播图初始化函数carouselScroll一定要放在$nextTick回调中执行
                    this.carouselScroll();
                })
            });
        },

（5）使用v-for渲染

综上，想要轮播图正常轮播，主要是轮播图的配置问题，observeParents和observer必不可少，还有就是初始化轮播图函数必须放在$nextTick的回调里面。