vue 中使用swiper ，难免会遇到的坑（一）

    先说一下近况，最近一直忙于项目的迭代，没有心情和思路去更新文章，翻了一下自己的过去文章，大概是一年前了，这些天忙的都是杂七八啦的事情，比如写作 点击打开链接，

     好了，接下来转入正题，谈到vue大家一定不会陌生，swiper更是，我们的项目同样不可避免的使用了二者（感叹一句！坑多大家自行理解）。

    版本：swiper.js 4+

               vue.js     2+

    ①项目中的使用（swiper.使用时不用引入css）

<script src="__PUBLIC__/Pc/js/vue.js"></script>
<script src="__PUBLIC__/Pc/js/swiper.min.js"></script>

    一、swiper数据动态修改后轮播失效问题（直接上代码）

    

<template  v-if="bannerimg!=null">
    <div class="swiper-slide" v-for="(bann,index) in bannerimg">
        <img :data-src="'__PUBLIC__/tudupload/'+bann.folder+'/a_'+bann.poname" class="srcImg swiper-lazy" src="" :key="bann.poname"  height="100%" @click="bigImg(index)" style="cursor:pointer"/>
    </div>
</template>

    通常情况下，当数据动态改变时，这里swiper元素也会跟着自动更新，但推荐使用 :key 去绑定，这里不懂得请移步vue官网

    二、swiper图片懒加载

changeBimg:function(datas,n){
    vm.selected= n;
    vm.bannerimg=[];
    vm.bigImgtype=[];

vm.bannerimg=[].concat(datas);//改变数据

$( ". swiper-lazy-preloader "). show() ; setTimeout( function(){ vm. bigImgtype=[]. concat(datas) ; bannerLun() ;//重新初始化swiper } , 400) ; } ,

  项目中切换到不同轮播组件时，使用了延时器setTimeout;

  这里就不上过多的代码了，欢迎随时交流！！

  caixin185

  你总能找到我！