前端uni-app篇之在uni-app中实现图片瀑布流布局并举行性能优化 - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<view class="waterfall-container">
<view v-for="(image, index) in imageList" :key="index" class="image-item">
<image :src="image.loaded ? image.url : placeholder" @load="handleImageLoaded(index)" @error="handleImageError(index)" />
<view v-if="!image.loaded" class="loading">加载中...</view>
<view v-if="image.error" class="error">加载失败</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imageList: [], // 图片列表，包含图片URL和加载状态
placeholder: 'path/to/your/placeholder.png', // 占位图路径
};
},
methods: {
// 图片加载成功处理
handleImageLoaded(index) {
this.$set(this.imageList[index], 'loaded', true);
},
// 图片加载失败处理
handleImageError(index) {
this.$set(this.imageList[index], 'error', true);
},
// 加载图片列表，示例中直接赋值，实际应用中可能需要从服务器获取
loadImageList() {
const images = [...]; // 从服务器获取的图片列表
this.imageList = images.map(url => ({
url,
loaded: false, // 初始未加载
error: false, // 初始无错误
}));
},
},
mounted() {
this.loadImageList();
},
};
</script>
<style>
.waterfall-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image-item {
width: 49%; /* 两列布局 */
margin-bottom: 10px;
}
.image-item image {
width: 100%;
}
.loading, .error {
text-align: center;
color: #fff;
}
</style>

复制代码