uni-app、H5实现瀑布流效果封装，列可以自定义

---

---

前言

最近做项目需要实现uni-app、H5实现瀑布流效果封装，网上搜索有很多的例子，但是代码都是不够完整的，下面来封装一个uni-app、H5都能用的代码。在小程序中，一个个item渲染可能出现问题，也通过加锁来解决问题。

---

一、效果

1、下面看一下实现的效果，我这里的商品图片是正方形是固定大小的，如果你想要图片不同效果，也是可以适配的。

二、使用代码

1、下面是封装的组件如何使用

2、关键是updateColumnOperator方法，需要请求数据的时候把数据放进去渲染。

const goodsListQuery = {
  limit: 30,
  offset: undefined as string | undefined,
}
const isLoading = ref(false)
const goodsList = ref>([])
const isEnd = ref(false)
const isRefreshing = ref(false)

// 获取商品列表
async function fetchGoodsList(options: { offset?: string; limit?: number } = {}) {
  const { offset, limit = goodsListQuery.limit } = options
  //接口自己替换自己的
  const { data } = await $apis.xxxxxx({
    categoryId: categoryId.value === -1 ? undefined : categoryId.value,
    keyword: '',
    offset,
    limit,
  })

  return { offset: data?.offset, list: data?.list ?? [] }
}

// 获取商品列表
async function fetchGoodsPage() {
  if (isLoading.value || isEnd.value)
    return

  try {
    goodsListQuery.offset = undefined
    isLoading.value = true
    const { list, offset } = await fetchGoodsList({ offset: goodsListQuery.offset })
    if (list?.length) {
      goodsList.value = list
      if (list.length < goodsListQuery.limit)
        isEnd.value = true
    }
    else {
      isEnd.value = true
    }
    goodsListQuery.offset = offset
    nextTick(() => {
      columnOperator?.reset(list)
    })
  }
  finally {
    isLoading.value = false
  }
}

//下一页
async function fetchGoodsNextPage() {
  if (isLoading.value || isEnd.value)
    return

  try {
    isLoading.value = true
    isRefreshing.value = true
    const { list, offset } = await fetchGoodsList({ offset: goodsListQuery.offset })
    if (list?.length) {
      goodsList.value.push(...list)
      if (list.length < goodsListQuery.limit)
        isEnd.value = true
    }
    else {
      isEnd.value = true
    }
    goodsListQuery.offset = offset
    columnOperator?.append(list)
  }
  finally {
    isRefreshing.value = false
    isLoading.value = false
  }
}

三、核心代码

1、核心代码TTMultiColumnList代码

2、核心代码multiColumn代码

export type ListItem = unknown

export interface ColumnItem {
  index: number
  data: ListItem
}

export type ColumnOperatorPredictor = (item: ListItem) => boolean

export interface ColumnOperator {
  readonly append: (list: Array) => void
  readonly remove: (predict: ColumnOperatorPredictor) => void
  readonly update: (predict: ColumnOperatorPredictor, data: ListItem) => void
  readonly reset: (list?: Array) => void
}

总结

这就是uni-app、H5实现瀑布流效果封装，希望能帮助到你，有什么问题可以私信给我。