小程序瀑布流的实现

小蓝 • 2024-12-11 17:10 • 编程

一、概述

小程序瀑布流是一个非常流行的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组件，可以在小程序中展示更好的信息，受到了用户的喜欢。实现起来非常简单，只需要确定每列的宽度，然后计算元素位置即可。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/233666.html