更新记录

1.0.0（2026-07-27） 下载此版本

• 首次发布通用瀑布流列表组件
• 支持 #item 插槽自定义任意列表卡片
• 支持最短列优先布局、图片异步回流
• 支持下拉刷新、触底加载更多（防抖）
• 兼容 H5、微信小程序、App-vue，支持 Vue2 / Vue3

平台兼容性

uni-app(4.16)

uni-app x(4.18)

其他

nny-pbl 通用瀑布流列表组件

适合商品、图文、笔记、相册等任意列表场景。通过 #item 插槽自定义卡片，支持下拉刷新、触底加载，兼容 H5 / 微信小程序 / App（vue），支持 Vue2 / Vue3。

特性

• 最短列优先布局，列数、间距可配置
• #item 插槽适配任意列表卡片
• 图片异步加载后自动回流，减少错位
• 下拉刷新、触底加载更多（内置防抖）
• 不写插槽时提供默认图文卡片
• easycom 自动引入，拿来即用

安装

插件市场导入后目录：

uni_modules/nny-pbl

符合 easycom，可直接使用：

<nny-pbl />

也可手动引入：

import NnyPbl from '@/uni_modules/nny-pbl/components/nny-pbl/nny-pbl.vue'

基础用法

<template>
  <nny-pbl
    :list="list"
    :column="2"
    :column-gap="10"
    :row-gap="10"
    :padding="12"
    :loading="loading"
    :has-more="hasMore"
    enable-refresh
    :refreshing="refreshing"
    height="100vh"
    @loadmore="loadMore"
    @refresh="onRefresh"
    @item-click="onItemClick"
  >
    <template #item="{ item }">
      <view class="card">
        <image class="card-img" :src="item.image" mode="widthFix" lazy-load />
        <text class="card-title">{{ item.title }}</text>
      </view>
    </template>
  </nny-pbl>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      hasMore: true,
      refreshing: false,
      page: 1
    }
  },
  onLoad() {
    this.loadMore()
  },
  methods: {
    onRefresh() {
      this.refreshing = true
      this.page = 1
      this.hasMore = true
      this.fetchList(1).then((arr) => {
        this.list = arr
        this.page = 2
        this.hasMore = arr.length >= 10
        this.refreshing = false
      }).catch(() => {
        this.refreshing = false
      })
    },
    loadMore() {
      if (this.loading || !this.hasMore || this.refreshing) return
      this.loading = true
      this.fetchList(this.page).then((arr) => {
        this.list = this.list.concat(arr)
        this.page += 1
        if (arr.length < 10) this.hasMore = false
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    fetchList(page) {
      // 换成你的接口
      return Promise.resolve([])
    },
    onItemClick(e) {
      console.log(e.item, e.index)
    }
  }
}
</script>

Props

Slots

Events

Methods（ref）

this.$refs.pbl.relayout() // 手动重排（卡片高度二次变化时调用）

使用建议

1. 每项尽量带稳定 id（或通过 keyField 指定字段）
2. height 请传明确高度，如 100vh 或 windowHeight + 'px'
3. 自定义卡片图片建议 mode="widthFix" + lazy-load
4. 刷新结束后务必将 refreshing 设回 false
5. 加载结束后务必将 loading 设回 false

平台兼容

示例工程

导入本插件的演示项目后，可查看：

pages/index/index.vue

隐私说明

• 本插件不申请系统权限
• 本插件不采集任何数据
• 本插件不包含广告