Vue+swiper异步加载轮播图，并且懒加载

最新推荐文章于 2025-07-23 09:45:18 发布

my小新

最新推荐文章于 2025-07-23 09:45:18 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_38304202/article/details/78282826

本文介绍如何在Vue项目中利用Swiper组件实现图片轮播效果，包括安装Swiper依赖、配置轮播图样式及代码实现，并详细解释了懒加载功能的设置与使用。

首先要安装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-lazy
2、

现在开始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