Uni-app中swiper组件图片(image)不显示的问题
今天在学习uni-app中的swiper时踩了一个巨大的坑
从接口获取了数据之后,将数据渲染在页面上,但是swiper里面的图片怎么都不显示
<template>
<view class="content">
<swiper class="swiper">
<swiper-item class="swiper-item" v-for="item in picList" :key="item.id">
<image :src="item.url" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
picList: []
}
},
onLoad() {
this.getSwiperPic()
},
methods: {
getSwiperPic() {
uni.request({
url: "https://api.thecatapi.com/v1/images/search?limit=2",
method: "GET",
success: ({data}) => {
this.picList = data
}
})
}
}
}
</script>
<style lang="scss">
.content {
// display: flex; //就是这一句代码惹的祸
.swiper {
.swiper-item {
image {
width: 100vw;
height: 350rpx;
}
}
}
}
</style>
加了弹性布局,页面没有报错,也能正常运行,但是就是不有图片
flex布局会影响swiper组件,所以不要把swiper组件放在flex布局的盒子中