vue中swiper的使用及初始化问题

安装swiper

npm i --s swiper;

引入swiper

import Swiper from ‘swiper’; 
import ‘swiper/dist/css/swiper.min.css’;

使用swiper

HTML

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

在vue中常用ajax获取数据，在mounted中引入数据

axios
.get('www.csdn.nzb.com')
.then(res=>{this.list = res})
.catch(err=>console.log(err))

初始化swiper

var swiper = new Swiper('.swiper-container',{
	loop:true;
	autoplay:true;
})

注意

swiper初始化问题

因为swiper数据是异步获取的，所以我们的swiper初始化要在状态赋值完，异步更新dom树上树之后再进行swiper的初始化

解决方法

1、在updated生命周期进行swiper初始化

updated(){new Swiper('.swiper-container',{})}

缺点：updated生命周期会频繁执行，只要状态发生改变updated就会重复执行，swiper初始化会多次执行，会导致swiper出现不可预知的错误

2、使用swiper提供的更新方法

在mounted生命周期中照常初始化swiper

mounted(){this.myswiper = new Swiper('.swiper-container',{})} ,  //this.myswiper自定义方法
updated(){this.myswiper.updated()}  //让swiper自动更新一次

缺点：可复用性不好

3、组件化封装

 <div id="box">
        <swiper :key="datalist.length">
            <div v-for="data in datalist" :key="data" class="swiper-slide">
                <img :src="data" >
            </div>
        </swiper>
    </div>
	Vue.component("swiper", {
            template: `
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <slot></slot>
                    </div
                </div>
            `,
            mounted() {
                new Swiper("swiper-container ", {})
            }
        })
        new Vue({
				el:"#box",
				data: { datalist:[]},
				mounted() {
						axios
							.get('www.nzb.com')
							.then(res=>{this.list = res})
							.catch(err=>console.log(err))
					}
		})

利用组件的唯一性，给是wiper加上唯一的key值，通过虚拟dom的diff算法来重新创建dom，即当ajax的数据请求来时，key值发生变化,重新创建一边swiper，原来的swiper就会销毁，轮播就可以使用了

优点：可复用性强，利于后期维护

以上内容经供参考