vue 中使用swiper ,难免会遇到的坑(一)

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

     好了,接下来转入正题,谈到vue大家一定不会陌生,swiper更是,我们的项目同样不可避免的使用了二者(感叹一句!坑多大家自行理解)。
    版本:swiper.js 4+

               vue.js     2+

    ①项目中的使用(swiper.使用时不用引入css)


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

    

    通常情况下,当数据动态改变时,这里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

  你总能找到我!

你可能感兴趣的:(vue,javascript)