一、概述
小程序瀑布流是一个非常流行的UI组件,它可以显示成行的矩形元素,并在不同的大小之间分配空间。这种布局模式可以非常好地利用空间,同时也可以让用户更好地找到他们的兴趣点。
小程序瀑布流实现的基本原理是将每个元素归为一定数量的列,然后将它们向下堆叠在一起,在每个瀑布流的列中平均分配元素。
二、实现步骤
1. 定义数据结构
interface IItem {
id: number | string;
width: number;
height: number;
imgUrl: string;
remark: string;
}
2. 获取数据
Page({
data: {
items: [],
columns: 2,
},
onLoad: function () {
// 获取数据
wx.request({
url: 'https://xxx.com/api/items',
success: (res) => {
const items = res.data.items;
this.setData({
items,
});
},
});
},
});
3. 计算瀑布流元素
getColumns() {
const { windowWidth } = wx.getSystemInfoSync();
const itemWidth = 300;
const columns = Math.floor(windowWidth / itemWidth);
return columns;
}
processItems(items) {
const { columns } = this.data;
let columnHeights = new Array(columns).fill(0);
const processedItems = items.map((item) => {
const width = 150; // 根据实际需要设置元素宽度
const height = item.height / item.width * width; // 缩放高度
const column = columnHeights.indexOf(Math.min(...columnHeights));
const top = columnHeights[column];
const left = column * width;
columnHeights[column] += height;
return { ...item, width, height, top, left };
});
return processedItems;
}
4. 渲染元素
<view class="waterfall">
<view class="waterfall__item" wx:for="{{ items }}" wx:key="id" style="width:{{ item.width }}px; height:{{ item.height }}px; top:{{ item.top }}px; left:{{ item.left }}px;">
<image class="waterfall__img" src="{{ item.imgUrl }}" mode="aspectFill" lazy-load />
<text class="waterfall__remark">{{ item.remark }}</text>
</view>
</view>
三、实现效果
我们已经完成了瀑布流的实现,瞧瞧效果:
四、注意事项
1. 所有的元素宽度必须设置为相同的固定值。
2. 尽可能确保每个元素都有一个高度,否则可能会出现奇怪的布局问题。
3. 当您使用image标签时,请确保提供width和height属性,这将确保图像加载完毕时布局正确。
4. 在渲染过程中请进行性能测试,以确保性能达到最佳状态。
五、总结
小程序瀑布流是一个非常实用的UI组件,可以在小程序中展示更好的信息,受到了用户的喜欢。实现起来非常简单,只需要确定每列的宽度,然后计算元素位置即可。