
正文
vue swiper异步加载轮播图,并且懒加载
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
参考:https://blog.csdn.net/weixin_38304202/article/details/78282826
效果:

此处安装省略
vue:
<div class="banner" v-show="isShowSlide">
<div class="swiper-banner">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
<img src="data:images/img_loading.jpg"
:data-src="item.imgpath" class="swiper-lazy" style="width:100%;height:100%">
</div>
</div>
<div class="swiper-pagination" v-if="swiperList.length>1">
<span v-for="(item,index) in swiperList"></span>
</div>
</div>
</div>
getImgs: function() { //created中调用
let _this = this;
_this.axios.get('请求链接').then(function(res) {
if (res.status === 200 && res.data.result === "0") {
const data = res.data.message.list;
for (let i in data) {
_this.swiperList.push(data[i]);
}
_this.swiperLength = _this.swiperList.length; _this.$nextTick(function() {
if (_this.swiperLength > 0) {
_this.isShowSlide = true;
if (_this.swiperLength == 1) {
_this.isAutoplay = 0;
_this.isLoop = false;
} else {
_this.isAutoplay = 3000;
_this.isLoop = true;
}
_this.mySwiper = new Swiper(".swiper-banner", {
autoplay: _this.isAutoplay,
loop: _this.isLoop,
autoplayDisableOnInteraction: false,
preventLinksPropagation: false,
lazyLoading: true, //懒加载开启
pagination: '.swiper-pagination',
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
})
} else {
_this.isShowSlide = false;
}
})
} else {
_this.isShowSlide = false;
}
}).catch(function(err) {
console.log(err);
})
},
.swiper-wrapper {
font-size: 0;
} .swiper-pagination {
width: 100%;
height: .2rem;
text-align: center;
position: absolute;
bottom: 0 !important;
line-height: .2rem;
box-sizing: border-box;
padding: 0 .3rem;
font-size: 0;
} >>>.swiper-pagination-bullet-active {
background-color: #ff7035 !important;
opacity: 1;
} .swiper-pagination-bullet {
background-color: rgba(255, 255, 255, 1);
opacity: 1;
} .swiper-slide {
height: 1.5rem !important;
line-height: 1.5rem !important;
} .swiper-wrapper {
width: 100% !important;
height: 100% !important;
} .swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: 100%;
font-size: 0;
position: relative;
}






