微信小程序实现动态高度瀑布流加虚拟列表的完整代码

以下是一个微信小程序实现动态高度瀑布流加虚拟列表的完整代码示例：

1. WXML文件：

<scroll-view class="scroll-view" scroll-y="true" bindscrolltolower="loadMore">
  <virtual-list 
    wx:for="{{list}}" 
    wx:key="id" 
    item-height="{{item.height}}" 
    item-size="{{item.size}}" 
    height="100%" 
    top="{{top}}" 
    total="{{total}}" 
    item-render="{{renderItem}}"
  ></virtual-list>
</scroll-view>

2. JS文件：

const app = getApp();

Page({
  data: {
    // 列表数据
    list: [],
    // 列表总数据量
    total: 0,
    // 列表滚动位置
    top: 0,
    // 每次加载的数据量
    pageSize: 10,
    // 是否正在加载数据
    loading: false,
  },

  onLoad() {
    this.loadData();
  },

  // 加载数据
  loadData() {
    const { list, total, pageSize } = this.data;
    const start = list.length;
    const end = start + pageSize - 1;

    if (start >= total || this.data.loading) {
      return;
    }

    this.setData({ loading: true });

    // 发起网络请求，获取数据
    wx.request({
      url: 'https://your-api-url.com',
      data: { start, end },
      success: (res) => {
        // 处理数据
        const data = res.data.map((item) => ({
          id: item.id,
          // 动态计算每个列表项的高度和大小
          height: Math.floor(Math.random() * 200 + 100),
          size: 1,
          ...item,
        }));

        this.setData({
          list: [...list, ...data],
          total: res.total,
          loading: false,
        });
      },
      fail: () => {
        this.setData({ loading: false });
      },
    });
  },

  // 渲染列表项
  renderItem(item) {
    return `
      <view class="item" style="height:${item.height}px;">
        <text>${item.title}</text>
      </view>
    `;
  },

  // 滚动到底部加载更多数据
  loadMore() {
    this.loadData();
  },
});

3. WXSS文件：

.scroll-view {
  height: 100%;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  margin: 10rpx;
  border-radius: 5rpx;
}

以上代码实现了一个简单的微信小程序动态高度瀑布流加虚拟列表的功能，可根据实际需要进行修改和优化。