前几天做了一个移动端项目，页面是贴图片上去的。发现在swiper中图片懒加载和图片高度自适应相矛盾，原因是在页面初始化的时候，用到是懒加载，所以页面高度不足以显示完全部的图片。
我的解决方案是：使用swiper属性autoHeight: true保证高度自适应。而懒加载是用v-if取代来做性能优化。
<template>
<swiper :options="swiperOption" ref="mySwiper" >
<swiper-slide>
<one ></one>
</swiper-slide>
<swiper-slide>
<two v-if="initOthers"></two>
<div class="empty-box" v-else></div>
</swiper-slide>
<swiper-slide>
<three v-if="initOthers"></three>
<div class="empty-box" v-else></div>
</swiper-slide>
</swiper>
</template>
<script>
export default{
data() {
return {
swiperOption: {
touchAngle : 10,
autoHeight: true
}
}
},
mounted(){
setTimeout(()=> {
this.initOthers = true;
}, 200);
},
}
</script>
<style scoped>
.empty-box{
width: 100%;
height: 400px;
}
</style>
