Vue+swiper异步加载轮播图,并且懒加载
首先要安装swiper 依赖引入import Swiper from 'swiper' 1、
·
首先要安装swiper 依赖
引入import Swiper from 'swiper'
<div class="swiper-banner"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(str,index) in advertising">
<img src="../../../dist/static/images/ad@2x.png" :data-src="str.imgUrl" class="swiper-lazy"> </div> </div> <div class="swiper-pagination"> <span v-for="(str,index) in advertising"></span> </div> </div>
1、//懒加载--真正要显示的图片放在:data-src="str.imgUrl",loading时放在src="../../../dist/static/images/ad@2x.png" class定义成swiper-lazy2、
现在开始mounted时初始化一下
var that = this that.mySwiper = new Swiper(".swiper-banner",{ autoplay: 4000, loop: that.paginationShow, autoplayDisableOnInteraction: false, preventLinksPropagation: true, lazyLoading : true,//懒加载开启 pagination: ".swiper-pagination", observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper onSlideChangeEnd: function(swiper){ swiper.update() },
}
3、
然后在你异步请求数据完成后
that.$nextTick(function() { that.mySwiper.startAutoplay()//重新开始轮播 that.mySwiper.reLoop()//重新计算slides个数 })
参考:http://www.cnblogs.com/DivHao/p/6866399.html
http://www.swiper.com.cn/api/Images/2015/0308/213.html
更多推荐
已为社区贡献8条内容
所有评论(0)