1 回复
针对您提到的uni-app中急需瀑布流插件的需求,这里提供一个基于uni-app实现的瀑布流布局示例代码。瀑布流布局通常用于展示图片或卡片列表,其中每个元素的高度可能不同,从而形成一种错落有致的视觉效果。
在uni-app中,我们可以通过使用v-for
指令结合CSS的column-count
属性或者Flexbox布局来实现瀑布流效果。以下是一个简单的示例,使用column-count
属性来实现瀑布流布局:
1. 页面模板(template)
<template>
<view class="waterfall">
<view v-for="(item, index) in items" :key="index" class="item">
<image :src="item.src" class="item-image"></image>
<text class="item-text">{{ item.text }}</text>
</view>
</view>
</template>
2. 样式(style)
<style scoped>
.waterfall {
column-count: 3; /* 设置列数,可以根据需要调整 */
column-gap: 10px; /* 设置列间距 */
}
.item {
break-inside: avoid; /* 防止元素在列中被拆分 */
margin-bottom: 10px; /* 元素底部间距 */
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.item-image {
width: 100%;
height: auto;
border-radius: 5px;
}
.item-text {
margin-top: 10px;
font-size: 14px;
color: #333;
}
</style>
3. 脚本(script)
<script>
export default {
data() {
return {
items: [
{ src: 'https://example.com/image1.jpg', text: 'Item 1' },
{ src: 'https://example.com/image2.jpg', text: 'Item 2' },
// ... 更多数据项
]
};
}
};
</script>
说明
- template 部分使用
v-for
指令遍历items
数组,每个元素渲染为一个.item
视图。 - style 部分使用CSS的
column-count
属性将容器分为多列,实现瀑布流效果。break-inside: avoid;
确保每个元素不被拆分到多列中。 - script 部分定义了
items
数组,包含每个瀑布流项的图片URL和文本内容。
这个示例展示了如何使用简单的CSS属性在uni-app中实现瀑布流布局。根据实际需求,您可以进一步调整样式和数据结构。