解决在vue中使用swiper loop失效的问题

一、html中引入

1.引入文件

vue下载文件
axios下载及引用方式
mockjs
swiper
jquery

引入swiper.css文件

2.设置css样式

3.html

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
  </div>

swiper使用方法
还有一些使用swiper-container的
其实 从Swiper7开始，容器默认类名由’.swiper-container’变更为’.swiper’。
更多api请参考 swiperApi

二、渲染数据

1.用mock生成随机虚拟数据

Mock.mock("login",{
	"imgList|5":["@color()"]
}//运用mock生成随机数据

2.用axios执行get请求数据，并赋值给data中的data中的imgList

methods:{
	getData(){
		axios.get("/login").then(response=>{
			this.imgList=response.data.imgList
			//运用axios 执行get指令获取数据 并赋值给data中的imgList
		})
	},

3.循环使用v-for指令绑定数据渲染

<div class="swiper">
    <div class="swiper-wrapper" ref="mySwiper">
        <div class="swiper-slide" v-for="(item,index) in imgList" :key="index" :style="{background:item}">{{index}}</div>
    </div>
    //这个是分页器导航
    <div class="swiper-pagination"></div>
  </div>

这里如果不加key可能会报错

4.methods中编辑初始化Swiper方法

initSwiper(){
var swiper = new Swiper(this.$refs.mySwiper, {
	//设置slider容器能够同时显示的slides数量
    slidesPerView: 4,
    //每个swiper-slide的间隔距离
    spaceBetween: 30,
    //在carousel mode下定义slides的数量多少为一组
    slidesPerGroup: 4,
    //是否循环 true 是，false 否
    loop: true,
    //在loop 模式下，将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
    loopFillGroupWithBlank: true,
    //初始化分页导航
    pagination: {
       el: ".swiper-pagination",
       clickable: true,
    },
  });
}

5.在created中调用

created(){
	this.getData()
	this.initSwiper()
}

三、具体问题

1.初始化完成之后swiper轮播出现问题1：不能自动切换甚至循环页面不能显示
1.问题产生原因：

axios执行get指令是异步请求
即在axios请求数据过程中initSwiper方法运行时要绑定的部分元素节点还没有创建成功导致swiper插件中部分指定并没有绑定到指定元素节点上
导致swiper轮播出现异常

2解决方法：

swiper中的abserver方法，在启动状态下，当我们修改swiper的子元素时，会自动初始化swiper即observer:true,
并该指令一般情况下搭配abserveParents:true,一起使用即当swiper的父元素变化时，会更新swiper

3.更改部分：

initSwiper(){
var swiper = new Swiper(this.$refs.mySwiper, {
	//设置slider容器能够同时显示的slides数量
    slidesPerView: 4,
    //每个swiper-slide的间隔距离
    spaceBetween: 30,
    //在carousel mode下定义slides的数量多少为一组
    slidesPerGroup: 4,
    //是否循环 true 是，false 否
    loop: true,
    //在loop 模式下，将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
    loopFillGroupWithBlank: true,
    observer:true,
    observeParents:true,
    //初始化分页导航
    pagination: {
       el: ".swiper-pagination",
       clickable: true,
    }
  });
}

2.更改完成后swiper轮播出现问题2：切换到最后一张即停止
1.问题原因：
在jquery中当得到数据时，是边加载边更新Dom
但是在Vue中，当得到数据时，而是全部加载完以后再更新Dom
即在这个问题中，initSwiper运行完之后，axios请求到的数据才加载完并更新Dom
在一开始容器中的数据并没有渲染 此时swiperOption配置的loop:true不生效
而即使swiper更新而loop属性却并不会重新加载即loop为false

2.解决方法：
方法 给initSwiper添加定时器 即等到axios数据加载完并渲染完页面以后再运行

setTimeout(()=>{
var swiper = new Swiper(this.$refs.mySwiper, {
	//设置slider容器能够同时显示的slides数量
    slidesPerView: 4,
    //每个swiper-slide的间隔距离
    spaceBetween: 30,
    //在carousel mode下定义slides的数量多少为一组
    slidesPerGroup: 4,
    //是否循环 true 是，false 否
    loop: true,
    //在loop 模式下，将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
    loopFillGroupWithBlank: true,
    observer:true,
    observeParents:true,
    //初始化分页导航
    pagination: {
       el: ".swiper-pagination",
       clickable: true,
    }
  });
},300)

但是在比较大的项目中，数据请求时间可能远远大于300ms影响用户体验 所有不推荐使用方法2 不在created中调用initSwiper而是在axios中调用initSwiper

created(){
this.getData()
}

并且利用setTimeout(()=>{},0)的异步请求属性 即等待axios的get指令请求和渲染完再执行。

getData(){
	axios.get("/login").then(respponse=>{
	this.imgList=response.data.imgList
	setTimeout(()=>{
		this.initSwiper()
	},0)
})

方法3类似于方法2
在vue中有Vue.nextTick([callback,context])机制
即在下次DOM更新循环结束之后执行延迟回调。
即this.$nextTick(()=>{})

getData(){
	axios.get("/login").then(respponse=>{
	this.imgList=response.data.imgList
	this.$nextTick(()=>{
		this.initSwiper()
	})
})

四、核心代码

1.observer:true,observeParents:true
2.this.$nextTick(()=>{})