将以下代码改成图片展示 循环排列两列 展示
html
<template>
<view>
<image v-for="(image, index) in imageList" :key="index" :src="image"></image>
</view>
</template>
<script>
export default {
data() {
return {
imageList: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg'
]
};
}
};
</script>
解决:
在下述代码中,我们给包含图片的容器设置了flex布局,并通过设置flex-wrap属性为wrap来实现换行。然后,给每个图片项设置了宽度为两列的一半,并设置了图片间距。这样就可以实现两列排列的图片展示效果。
html
<template>
<view class="image-container">
<image v-for="(image, index) in imageList" :key="index" :src="image" class="image-item"></image>
</view>
</template>
<style>
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
margin-left: 20px;
margin-right: 20px;
}
.image-item {
width: 48%; /* 设置图片宽度为两列的一半 */
margin-bottom: 10px; /* 设置图片间距 */
}
</style>
<script>
export default {
data() {
return {
imageList: [
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
'/static/test-image.jpg',
]
};
}
};
</script>