From 204aa7e9c0f40f7c8a23d00ee0251db963e3acbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Tue, 16 Jun 2026 10:43:01 +0800
Subject: [PATCH 1/2] feat: add list component

---
 packages/components/list/README.en-US.md      | 33 ++++++++++
 packages/components/list/README.md            | 33 ++++++++++
 .../components/list/_example/base/index.json  |  7 +++
 .../components/list/_example/base/index.less  |  5 ++
 .../components/list/_example/base/index.ts    | 50 ++++++++++++++++
 .../components/list/_example/base/index.wxml  |  5 ++
 .../list/_example/err-tip/index.json          |  8 +++
 .../list/_example/err-tip/index.less          | 13 ++++
 .../components/list/_example/err-tip/index.ts | 43 +++++++++++++
 .../list/_example/err-tip/index.wxml          |  8 +++
 packages/components/list/_example/list.json   | 10 ++++
 packages/components/list/_example/list.less   | 30 ++++++++++
 packages/components/list/_example/list.ts     | 10 ++++
 packages/components/list/_example/list.wxml   | 29 +++++++++
 .../list/_example/pull-refresh/index.json     |  8 +++
 .../list/_example/pull-refresh/index.less     |  5 ++
 .../list/_example/pull-refresh/index.ts       | 60 +++++++++++++++++++
 .../list/_example/pull-refresh/index.wxml     |  7 +++
 packages/components/list/index.ts             |  3 +
 packages/components/list/list.json            |  7 +++
 packages/components/list/list.less            | 14 +++++
 packages/components/list/list.ts              | 55 +++++++++++++++++
 packages/components/list/list.wxml            | 23 +++++++
 packages/components/list/props.ts             | 23 +++++++
 packages/components/list/type.ts              | 29 +++++++++
 packages/tdesign-miniprogram/example/app.json |  1 +
 .../example/pages/home/data/display.ts        |  4 ++
 .../example/project.config.json               |  6 ++
 28 files changed, 529 insertions(+)
 create mode 100644 packages/components/list/README.en-US.md
 create mode 100644 packages/components/list/README.md
 create mode 100644 packages/components/list/_example/base/index.json
 create mode 100644 packages/components/list/_example/base/index.less
 create mode 100644 packages/components/list/_example/base/index.ts
 create mode 100644 packages/components/list/_example/base/index.wxml
 create mode 100644 packages/components/list/_example/err-tip/index.json
 create mode 100644 packages/components/list/_example/err-tip/index.less
 create mode 100644 packages/components/list/_example/err-tip/index.ts
 create mode 100644 packages/components/list/_example/err-tip/index.wxml
 create mode 100644 packages/components/list/_example/list.json
 create mode 100644 packages/components/list/_example/list.less
 create mode 100644 packages/components/list/_example/list.ts
 create mode 100644 packages/components/list/_example/list.wxml
 create mode 100644 packages/components/list/_example/pull-refresh/index.json
 create mode 100644 packages/components/list/_example/pull-refresh/index.less
 create mode 100644 packages/components/list/_example/pull-refresh/index.ts
 create mode 100644 packages/components/list/_example/pull-refresh/index.wxml
 create mode 100644 packages/components/list/index.ts
 create mode 100644 packages/components/list/list.json
 create mode 100644 packages/components/list/list.less
 create mode 100644 packages/components/list/list.ts
 create mode 100644 packages/components/list/list.wxml
 create mode 100644 packages/components/list/props.ts
 create mode 100644 packages/components/list/type.ts

diff --git a/packages/components/list/README.en-US.md b/packages/components/list/README.en-US.md
new file mode 100644
index 0000000000..663d2f6b2b
--- /dev/null
+++ b/packages/components/list/README.en-US.md
@@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+
+### List Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+async-loading | String / Slot | - | Custom loading content. Empty value hides loading content. `'loading'` shows loading state. `'load-more'` shows load-more state. Slot value customizes loading content | N
+footer | String | - | Footer | N
+header | String | - | Header | N
+
+### List Events
+
+name | params | description
+-- | -- | --
+load-more | \- | \-
+scroll | `(bottomDistance: number, scrollTop: number)` | Triggered when the list scrolls. bottomDistance means the distance from the bottom; scrollTop means the scroll distance from the top
+
+### List Slots
+
+name | Description
+-- | --
+async-loading | Custom `async-loading` content
+footer | Custom `footer` content
+header | Custom `header` content
+
+### List External Classes
+
+class | description
+-- | --
+t-class | Root class
+t-class-loading | Loading state class
diff --git a/packages/components/list/README.md b/packages/components/list/README.md
new file mode 100644
index 0000000000..0ecca1b9a7
--- /dev/null
+++ b/packages/components/list/README.md
@@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+
+### List Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+async-loading | String / Slot | - | 自定义加载中。值为空不显示加载中，值为 `'loading'` 显示加载中状态，值为 `'load-more'` 显示加载更多状态。值类型为 Slot，则表示自定义加载状态呈现内容 | N
+footer | String | - | 底部 | N
+header | String | - | 头部 | N
+
+### List Events
+
+名称 | 参数 | 描述
+-- | -- | --
+load-more | \- | 点击加载更多时触发
+scroll | `(bottomDistance: number, scrollTop: number)` | 列表滚动时触发，bottomDistance 表示底部距离；scrollTop 表示顶部滚动距离
+
+### List Slots
+
+名称 | 描述
+-- | --
+async-loading | 自定义 `async-loading` 显示内容
+footer | 自定义 `footer` 显示内容
+header | 自定义 `header` 显示内容
+
+### List External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-loading | 加载状态样式类
diff --git a/packages/components/list/_example/base/index.json b/packages/components/list/_example/base/index.json
new file mode 100644
index 0000000000..dbfa6ebcbf
--- /dev/null
+++ b/packages/components/list/_example/base/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-list": "tdesign-miniprogram/list/list",
+    "t-cell": "tdesign-miniprogram/cell/cell"
+  }
+}
diff --git a/packages/components/list/_example/base/index.less b/packages/components/list/_example/base/index.less
new file mode 100644
index 0000000000..b5decaad7a
--- /dev/null
+++ b/packages/components/list/_example/base/index.less
@@ -0,0 +1,5 @@
+.cell {
+  min-height: 48rpx;
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/components/list/_example/base/index.ts b/packages/components/list/_example/base/index.ts
new file mode 100644
index 0000000000..d852228da9
--- /dev/null
+++ b/packages/components/list/_example/base/index.ts
@@ -0,0 +1,50 @@
+const BASE_ONCE_LOAD_NUM = 20;
+const BASE_MAX_DATA_LEN = 60;
+
+Component({
+  data: {
+    list: [] as string[],
+    loading: '',
+  },
+
+  lifetimes: {
+    attached() {
+      this.onLoad();
+    },
+  },
+
+  methods: {
+    loadData(isRefresh = false) {
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          const { list } = this.data;
+          const nextList = isRefresh ? [] : [...list];
+
+          for (let i = 0; i < BASE_ONCE_LOAD_NUM; i += 1) {
+            nextList.push(`${nextList.length + 1}`);
+          }
+
+          this.setData({ list: nextList });
+          resolve();
+        }, 1000);
+      });
+    },
+
+    onLoad(isRefresh = false) {
+      const { list, loading } = this.data;
+      if ((list.length >= BASE_MAX_DATA_LEN && !isRefresh) || loading) return;
+
+      this.setData({ loading: 'loading' });
+      this.loadData(isRefresh).then(() => {
+        this.setData({ loading: '' });
+      });
+    },
+
+    onScroll(event: WechatMiniprogram.CustomEvent) {
+      const { bottomDistance } = event.detail;
+      if (bottomDistance < 50) {
+        this.onLoad();
+      }
+    },
+  },
+});
diff --git a/packages/components/list/_example/base/index.wxml b/packages/components/list/_example/base/index.wxml
new file mode 100644
index 0000000000..900e46d4ea
--- /dev/null
+++ b/packages/components/list/_example/base/index.wxml
@@ -0,0 +1,5 @@
+<t-list asyncLoading="{{loading}}" bind:scroll="onScroll">
+  <t-cell wx:for="{{list}}" wx:key="*this" align="middle">
+    <view class="cell" slot="title">{{item}}</view>
+  </t-cell>
+</t-list>
diff --git a/packages/components/list/_example/err-tip/index.json b/packages/components/list/_example/err-tip/index.json
new file mode 100644
index 0000000000..5ef0472e22
--- /dev/null
+++ b/packages/components/list/_example/err-tip/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-list": "tdesign-miniprogram/list/list",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-loading": "tdesign-miniprogram/loading/loading"
+  }
+}
diff --git a/packages/components/list/_example/err-tip/index.less b/packages/components/list/_example/err-tip/index.less
new file mode 100644
index 0000000000..6e221dc140
--- /dev/null
+++ b/packages/components/list/_example/err-tip/index.less
@@ -0,0 +1,13 @@
+.cell {
+  min-height: 48rpx;
+  display: flex;
+  align-items: center;
+}
+
+.custom-error {
+  color: var(--td-text-color-placeholder);
+}
+
+.custom-error text {
+  color: var(--td-brand-color);
+}
diff --git a/packages/components/list/_example/err-tip/index.ts b/packages/components/list/_example/err-tip/index.ts
new file mode 100644
index 0000000000..a056cec9a9
--- /dev/null
+++ b/packages/components/list/_example/err-tip/index.ts
@@ -0,0 +1,43 @@
+Component({
+  data: {
+    listError: [] as string[],
+    loading: '',
+    showError: false,
+  },
+
+  lifetimes: {
+    attached() {
+      this.onLoadError();
+    },
+  },
+
+  methods: {
+    onLoadError() {
+      this.setData({ loading: 'loading' });
+
+      setTimeout(() => {
+        const { listError } = this.data;
+        const nextList = [...listError];
+        for (let i = 0; i < 8; i += 1) {
+          nextList.push(`${nextList.length + 1}`);
+        }
+        this.setData({ listError: nextList, showError: true, loading: '' });
+      }, 1000);
+    },
+
+    onLoadMore() {
+      const { listError, loading } = this.data;
+      this.setData({ showError: false });
+      if (listError.length >= 60 || loading) return;
+
+      this.setData({ loading: 'loading' });
+      setTimeout(() => {
+        const nextList = [...this.data.listError];
+        for (let i = 0; i < 15; i += 1) {
+          nextList.push(`${nextList.length + 1}`);
+        }
+        this.setData({ listError: nextList, loading: '' });
+      }, 1000);
+    },
+  },
+});
diff --git a/packages/components/list/_example/err-tip/index.wxml b/packages/components/list/_example/err-tip/index.wxml
new file mode 100644
index 0000000000..4bd40741ad
--- /dev/null
+++ b/packages/components/list/_example/err-tip/index.wxml
@@ -0,0 +1,8 @@
+<t-list asyncLoading="{{loading}}" bind:scroll="onLoadMore">
+  <t-cell wx:for="{{listError}}" wx:key="*this" align="middle">
+    <view class="cell" slot="title">{{item}}</view>
+  </t-cell>
+  <t-loading wx:if="{{showError}}" indicator="{{false}}" slot="footer" bind:tap="onLoadMore">
+    <view class="custom-error">请求失败，点击重新<text>加载</text></view>
+  </t-loading>
+</t-list>
diff --git a/packages/components/list/_example/list.json b/packages/components/list/_example/list.json
new file mode 100644
index 0000000000..21800be9e3
--- /dev/null
+++ b/packages/components/list/_example/list.json
@@ -0,0 +1,10 @@
+{
+  "navigationBarTitleText": "List",
+  "navigationBarBackgroundColor": "#fff",
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "base": "./base",
+    "pull-refresh": "./pull-refresh",
+    "err-tip": "./err-tip"
+  }
+}
diff --git a/packages/components/list/_example/list.less b/packages/components/list/_example/list.less
new file mode 100644
index 0000000000..61eb41868e
--- /dev/null
+++ b/packages/components/list/_example/list.less
@@ -0,0 +1,30 @@
+page {
+  background-color: var(--td-bg-color-page);
+}
+
+.demo {
+  padding-bottom: 32rpx;
+}
+
+.list-demo {
+  .cell {
+    width: 100%;
+    text-align: center;
+  }
+
+  .custom-error {
+    font-size: 28rpx;
+    color: var(--td-text-color-placeholder);
+    text-align: center;
+    padding-top: 32rpx;
+  }
+
+  .custom-error text {
+    color: var(--td-brand-color);
+  }
+
+  .t-button {
+    margin: 0 32rpx 32rpx;
+    width: calc(100% - 64rpx);
+  }
+}
diff --git a/packages/components/list/_example/list.ts b/packages/components/list/_example/list.ts
new file mode 100644
index 0000000000..75a581ec25
--- /dev/null
+++ b/packages/components/list/_example/list.ts
@@ -0,0 +1,10 @@
+Page({
+  data: {
+    currentTab: 'info',
+  },
+
+  onChangeTab(event: WechatMiniprogram.CustomEvent) {
+    const { tab } = event.currentTarget.dataset;
+    this.setData({ currentTab: tab });
+  },
+});
diff --git a/packages/components/list/_example/list.wxml b/packages/components/list/_example/list.wxml
new file mode 100644
index 0000000000..2bf66f06b5
--- /dev/null
+++ b/packages/components/list/_example/list.wxml
@@ -0,0 +1,29 @@
+<t-navbar class="demo-navbar" title="List" leftArrow placeholder />
+<view class="demo list-demo">
+  <t-demo-header
+    wx:if="{{currentTab === 'info'}}"
+    title="List 列表"
+    desc="瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
+
+  <t-demo wx:if="{{currentTab === 'info'}}" title="01 类型" desc="基础列表">
+    <t-button size="large" variant="outline" theme="primary" data-tab="base" bind:tap="onChangeTab">基础列表</t-button>
+    <t-button size="large" variant="outline" theme="primary" data-tab="pull-refresh" bind:tap="onChangeTab"
+      >下拉刷新</t-button
+    >
+    <t-button size="large" variant="outline" theme="primary" data-tab="error-tip" bind:tap="onChangeTab"
+      >错误提示</t-button
+    >
+  </t-demo>
+
+  <view wx:if="{{currentTab === 'base'}}">
+    <base />
+  </view>
+  <view wx:if="{{currentTab === 'error-tip'}}">
+    <err-tip />
+  </view>
+  <view wx:if="{{currentTab === 'pull-refresh'}}" class="pull-refresh-wrap">
+    <pull-refresh />
+  </view>
+</view>
diff --git a/packages/components/list/_example/pull-refresh/index.json b/packages/components/list/_example/pull-refresh/index.json
new file mode 100644
index 0000000000..07d77d85a9
--- /dev/null
+++ b/packages/components/list/_example/pull-refresh/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-list": "tdesign-miniprogram/list/list",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh"
+  }
+}
diff --git a/packages/components/list/_example/pull-refresh/index.less b/packages/components/list/_example/pull-refresh/index.less
new file mode 100644
index 0000000000..b5decaad7a
--- /dev/null
+++ b/packages/components/list/_example/pull-refresh/index.less
@@ -0,0 +1,5 @@
+.cell {
+  min-height: 48rpx;
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/components/list/_example/pull-refresh/index.ts b/packages/components/list/_example/pull-refresh/index.ts
new file mode 100644
index 0000000000..1aaa895822
--- /dev/null
+++ b/packages/components/list/_example/pull-refresh/index.ts
@@ -0,0 +1,60 @@
+const ONCE_LOAD_NUM = 20;
+const MAX_DATA_LEN = 60;
+
+Component({
+  data: {
+    listPull: [] as string[],
+    loading: '',
+    refreshing: false,
+  },
+
+  lifetimes: {
+    attached() {
+      this.onLoadPull();
+    },
+  },
+
+  methods: {
+    loadData(isRefresh = false) {
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          const { listPull } = this.data;
+          const nextList = isRefresh ? [] : [...listPull];
+
+          for (let i = 0; i < ONCE_LOAD_NUM; i += 1) {
+            nextList.push(`${nextList.length + 1}`);
+          }
+
+          this.setData({ listPull: nextList });
+          resolve();
+        }, 1000);
+      });
+    },
+
+    onLoadPull(isRefresh = false) {
+      const { listPull, loading } = this.data;
+      if ((listPull.length >= MAX_DATA_LEN && !isRefresh) || loading) return;
+
+      this.setData({ loading: 'loading' });
+      this.loadData(isRefresh).then(() => {
+        this.setData({ loading: '', refreshing: false });
+      });
+    },
+
+    onScroll(event: WechatMiniprogram.CustomEvent) {
+      const { bottomDistance } = event.detail;
+      if (bottomDistance < 50) {
+        this.onLoadPull();
+      }
+    },
+
+    onPullScroll(event: WechatMiniprogram.CustomEvent) {
+      this.selectComponent('#pull-list')?.onScroll(event.detail);
+    },
+
+    onRefresh() {
+      this.setData({ refreshing: true });
+      this.onLoadPull(true);
+    },
+  },
+});
diff --git a/packages/components/list/_example/pull-refresh/index.wxml b/packages/components/list/_example/pull-refresh/index.wxml
new file mode 100644
index 0000000000..08a69ec026
--- /dev/null
+++ b/packages/components/list/_example/pull-refresh/index.wxml
@@ -0,0 +1,7 @@
+<t-pull-down-refresh value="{{refreshing}}" bind:refresh="onRefresh" bind:scroll="onPullScroll">
+  <t-list id="pull-list" asyncLoading="{{loading}}" bind:scroll="onScroll">
+    <t-cell wx:for="{{listPull}}" wx:key="*this" align="middle">
+      <view class="cell" slot="title">{{item}}</view>
+    </t-cell>
+  </t-list>
+</t-pull-down-refresh>
diff --git a/packages/components/list/index.ts b/packages/components/list/index.ts
new file mode 100644
index 0000000000..d573fa2c65
--- /dev/null
+++ b/packages/components/list/index.ts
@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './list';
diff --git a/packages/components/list/list.json b/packages/components/list/list.json
new file mode 100644
index 0000000000..f20e16478f
--- /dev/null
+++ b/packages/components/list/list.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "t-loading": "../loading/loading"
+  }
+}
diff --git a/packages/components/list/list.less b/packages/components/list/list.less
new file mode 100644
index 0000000000..dc124a553d
--- /dev/null
+++ b/packages/components/list/list.less
@@ -0,0 +1,14 @@
+@import '../common/style/base.less';
+
+@list: ~'@{prefix}-list';
+
+.@{list} {
+  &__loading {
+    display: inline-flex;
+    margin: 20rpx 0 8rpx;
+
+    &--wrapper {
+      text-align: center;
+    }
+  }
+}
diff --git a/packages/components/list/list.ts b/packages/components/list/list.ts
new file mode 100644
index 0000000000..3e32eaa237
--- /dev/null
+++ b/packages/components/list/list.ts
@@ -0,0 +1,55 @@
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import { getRect, systemInfo } from '../common/utils';
+import pageScrollMixin from '../mixins/page-scroll';
+import usingConfig from '../mixins/using-config';
+import props from './props';
+import type { TdListProps } from './type';
+
+const { prefix } = config;
+const componentName = 'list';
+const name = `${prefix}-${componentName}`;
+
+export interface ListProps extends TdListProps {}
+
+@wxComponent()
+export default class List extends SuperComponent {
+  externalClasses = [`${prefix}-class`, `${prefix}-class-loading`];
+
+  behaviors = [usingConfig({ componentName }), pageScrollMixin()];
+
+  options = {
+    multipleSlots: true,
+  };
+
+  properties = props;
+
+  data = {
+    prefix,
+    classPrefix: name,
+  };
+
+  methods = {
+    onLoadMore() {
+      if (this.properties.asyncLoading === 'load-more') {
+        this.triggerEvent('load-more');
+      }
+    },
+
+    onScroll(event?: { scrollTop?: number; bottomDistance?: number }) {
+      const scrollTop = event?.scrollTop || 0;
+
+      if (typeof event?.bottomDistance === 'number') {
+        this.triggerEvent('scroll', { bottomDistance: event.bottomDistance, scrollTop });
+        return;
+      }
+
+      getRect(this, `.${name}`).then((rect) => {
+        this.triggerEvent('scroll', {
+          bottomDistance: rect.bottom - systemInfo.windowHeight,
+          scrollTop,
+        });
+      });
+    },
+  };
+}
diff --git a/packages/components/list/list.wxml b/packages/components/list/list.wxml
new file mode 100644
index 0000000000..b8b2152bb3
--- /dev/null
+++ b/packages/components/list/list.wxml
@@ -0,0 +1,23 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{classPrefix}}">
+  <view wx:if="{{header}}">{{header}}</view>
+  <slot name="header" />
+
+  <slot />
+
+  <view class="{{classPrefix}}__loading--wrapper" bind:tap="onLoadMore">
+    <t-loading
+      wx:if="{{asyncLoading === 'loading' || asyncLoading === 'load-more'}}"
+      indicator="{{asyncLoading === 'loading'}}"
+      text="{{asyncLoading === 'loading' ? globalConfig.loading : globalConfig.loadingMoreText}}"
+      t-class="{{classPrefix}}__loading {{prefix}}-class-loading"
+    />
+    <block wx:else>
+      <slot name="asyncLoading" />
+    </block>
+  </view>
+
+  <view wx:if="{{footer}}">{{footer}}</view>
+  <slot name="footer" />
+</view>
diff --git a/packages/components/list/props.ts b/packages/components/list/props.ts
new file mode 100644
index 0000000000..b97d32732f
--- /dev/null
+++ b/packages/components/list/props.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdListProps } from './type';
+const props: TdListProps = {
+  /** 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容 */
+  asyncLoading: {
+    type: String,
+  },
+  /** 底部 */
+  footer: {
+    type: String,
+  },
+  /** 头部 */
+  header: {
+    type: String,
+  },
+};
+
+export default props;
diff --git a/packages/components/list/type.ts b/packages/components/list/type.ts
new file mode 100644
index 0000000000..9b26ff478a
--- /dev/null
+++ b/packages/components/list/type.ts
@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdListProps {
+  /**
+   * 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容
+   */
+  asyncLoading?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 底部
+   */
+  footer?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 头部
+   */
+  header?: {
+    type: StringConstructor;
+    value?: string;
+  };
+}
diff --git a/packages/tdesign-miniprogram/example/app.json b/packages/tdesign-miniprogram/example/app.json
index 2660bc10b0..cff7a2bff5 100644
--- a/packages/tdesign-miniprogram/example/app.json
+++ b/packages/tdesign-miniprogram/example/app.json
@@ -83,6 +83,7 @@
     "pages/notice-bar/notice-bar",
     "pages/image-viewer/image-viewer",
     "pages/image-viewer/skyline/image-viewer",
+    "pages/list/list",
     "pages/result/result",
     "pages/result/skyline/result",
     "pages/result/result-page",
diff --git a/packages/tdesign-miniprogram/example/pages/home/data/display.ts b/packages/tdesign-miniprogram/example/pages/home/data/display.ts
index e2ad3f166f..037051a935 100644
--- a/packages/tdesign-miniprogram/example/pages/home/data/display.ts
+++ b/packages/tdesign-miniprogram/example/pages/home/data/display.ts
@@ -50,6 +50,10 @@ const display = {
       name: 'ImageViewer',
       label: '图片预览',
     },
+    {
+      name: 'List',
+      label: '列表',
+    },
     {
       name: 'Progress',
       label: '进度条',
diff --git a/packages/tdesign-miniprogram/example/project.config.json b/packages/tdesign-miniprogram/example/project.config.json
index a05bb5e322..018242de07 100644
--- a/packages/tdesign-miniprogram/example/project.config.json
+++ b/packages/tdesign-miniprogram/example/project.config.json
@@ -238,6 +238,12 @@
           "query": "",
           "scene": null
         },
+        {
+          "name": "list",
+          "pathName": "pages/list/list",
+          "query": "",
+          "scene": null
+        },
         {
           "name": "message",
           "pathName": "pages/message/message",

From d6c76ce9b79c90bfc0553f6e9989e40b2be6ad4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Tue, 16 Jun 2026 11:54:11 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=BB=84=E4=BB=B6=E5=8F=8A=E7=9B=B8=E5=85=B3=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/list/README.md            |  23 +++-
 .../components/list/_example/base/index.less  |  13 ++-
 .../components/list/_example/base/index.wxml  |   4 +-
 .../list/_example/err-tip/index.less          |  13 ++-
 .../list/_example/err-tip/index.wxml          |  10 +-
 packages/components/list/_example/list.less   |   5 -
 .../list/_example/pull-refresh/index.less     |  13 ++-
 .../list/_example/pull-refresh/index.wxml     |  10 +-
 .../site/docs/overview.en-US.md               |   8 ++
 .../tdesign-miniprogram/site/docs/overview.md |   8 ++
 .../tdesign-miniprogram/site/site.config.mjs  |   9 ++
 .../tdesign-uniapp/example/src/pages.json     |   7 ++
 .../example/src/pages/home/data/display.json  |   6 +-
 packages/tdesign-uniapp/global.d.ts           |   1 +
 packages/tdesign-uniapp/package.json          |   7 +-
 packages/tdesign-uniapp/site/docs.config.js   |   9 ++
 .../site/docs/overview.en-US.md               |   8 ++
 packages/tdesign-uniapp/site/docs/overview.md |   8 ++
 .../uniapp-components/list/README.en-US.md    |  27 +++++
 packages/uniapp-components/list/README.md     |  48 ++++++++
 .../list/_example/base/index.vue              |  91 +++++++++++++++
 .../list/_example/err-tip/index.vue           |  98 ++++++++++++++++
 .../uniapp-components/list/_example/list.less |  25 +++++
 .../uniapp-components/list/_example/list.vue  |  82 ++++++++++++++
 .../list/_example/pull-refresh/index.vue      | 105 ++++++++++++++++++
 packages/uniapp-components/list/list.less     |  14 +++
 packages/uniapp-components/list/list.vue      |  99 +++++++++++++++++
 packages/uniapp-components/list/props.ts      |  30 +++++
 packages/uniapp-components/list/type.ts       |  28 +++++
 29 files changed, 786 insertions(+), 23 deletions(-)
 create mode 100644 packages/uniapp-components/list/README.en-US.md
 create mode 100644 packages/uniapp-components/list/README.md
 create mode 100644 packages/uniapp-components/list/_example/base/index.vue
 create mode 100644 packages/uniapp-components/list/_example/err-tip/index.vue
 create mode 100644 packages/uniapp-components/list/_example/list.less
 create mode 100644 packages/uniapp-components/list/_example/list.vue
 create mode 100644 packages/uniapp-components/list/_example/pull-refresh/index.vue
 create mode 100644 packages/uniapp-components/list/list.less
 create mode 100644 packages/uniapp-components/list/list.vue
 create mode 100644 packages/uniapp-components/list/props.ts
 create mode 100644 packages/uniapp-components/list/type.ts

diff --git a/packages/components/list/README.md b/packages/components/list/README.md
index 0ecca1b9a7..91765df12a 100644
--- a/packages/components/list/README.md
+++ b/packages/components/list/README.md
@@ -1,4 +1,25 @@
-:: BASE_DOC ::
+---
+title: List 列表
+description: 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
+spline: base
+isComponent: true
+---
+
+## 代码演示
+
+### 组件类型
+
+#### 基础列表
+
+{{ base }}
+
+#### 下拉刷新
+
+{{ pull-refresh }}
+
+#### 错误提示
+
+{{ err-tip }}
 
 ## API
 
diff --git a/packages/components/list/_example/base/index.less b/packages/components/list/_example/base/index.less
index b5decaad7a..2b624d5804 100644
--- a/packages/components/list/_example/base/index.less
+++ b/packages/components/list/_example/base/index.less
@@ -1,5 +1,12 @@
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  justify-content: center;
+}
+
 .cell {
-  min-height: 48rpx;
-  display: flex;
-  align-items: center;
+  width: 100%;
+  text-align: center;
 }
diff --git a/packages/components/list/_example/base/index.wxml b/packages/components/list/_example/base/index.wxml
index 900e46d4ea..519e9e3ede 100644
--- a/packages/components/list/_example/base/index.wxml
+++ b/packages/components/list/_example/base/index.wxml
@@ -1,5 +1,5 @@
 <t-list asyncLoading="{{loading}}" bind:scroll="onScroll">
-  <t-cell wx:for="{{list}}" wx:key="*this" align="middle">
-    <view class="cell" slot="title">{{item}}</view>
+  <t-cell wx:for="{{list}}" wx:key="*this" align="middle" t-class-center="list-cell__center" t-class-note="list-cell">
+    <view class="cell" slot="note">{{item}}</view>
   </t-cell>
 </t-list>
diff --git a/packages/components/list/_example/err-tip/index.less b/packages/components/list/_example/err-tip/index.less
index 6e221dc140..428222c40b 100644
--- a/packages/components/list/_example/err-tip/index.less
+++ b/packages/components/list/_example/err-tip/index.less
@@ -1,7 +1,14 @@
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  justify-content: center;
+}
+
 .cell {
-  min-height: 48rpx;
-  display: flex;
-  align-items: center;
+  width: 100%;
+  text-align: center;
 }
 
 .custom-error {
diff --git a/packages/components/list/_example/err-tip/index.wxml b/packages/components/list/_example/err-tip/index.wxml
index 4bd40741ad..cfa1c5be6d 100644
--- a/packages/components/list/_example/err-tip/index.wxml
+++ b/packages/components/list/_example/err-tip/index.wxml
@@ -1,6 +1,12 @@
 <t-list asyncLoading="{{loading}}" bind:scroll="onLoadMore">
-  <t-cell wx:for="{{listError}}" wx:key="*this" align="middle">
-    <view class="cell" slot="title">{{item}}</view>
+  <t-cell
+    wx:for="{{listError}}"
+    wx:key="*this"
+    align="middle"
+    t-class-center="list-cell__center"
+    t-class-note="list-cell"
+  >
+    <view class="cell" slot="note">{{item}}</view>
   </t-cell>
   <t-loading wx:if="{{showError}}" indicator="{{false}}" slot="footer" bind:tap="onLoadMore">
     <view class="custom-error">请求失败，点击重新<text>加载</text></view>
diff --git a/packages/components/list/_example/list.less b/packages/components/list/_example/list.less
index 61eb41868e..d077823bed 100644
--- a/packages/components/list/_example/list.less
+++ b/packages/components/list/_example/list.less
@@ -7,11 +7,6 @@ page {
 }
 
 .list-demo {
-  .cell {
-    width: 100%;
-    text-align: center;
-  }
-
   .custom-error {
     font-size: 28rpx;
     color: var(--td-text-color-placeholder);
diff --git a/packages/components/list/_example/pull-refresh/index.less b/packages/components/list/_example/pull-refresh/index.less
index b5decaad7a..2b624d5804 100644
--- a/packages/components/list/_example/pull-refresh/index.less
+++ b/packages/components/list/_example/pull-refresh/index.less
@@ -1,5 +1,12 @@
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  justify-content: center;
+}
+
 .cell {
-  min-height: 48rpx;
-  display: flex;
-  align-items: center;
+  width: 100%;
+  text-align: center;
 }
diff --git a/packages/components/list/_example/pull-refresh/index.wxml b/packages/components/list/_example/pull-refresh/index.wxml
index 08a69ec026..8c5d1046fb 100644
--- a/packages/components/list/_example/pull-refresh/index.wxml
+++ b/packages/components/list/_example/pull-refresh/index.wxml
@@ -1,7 +1,13 @@
 <t-pull-down-refresh value="{{refreshing}}" bind:refresh="onRefresh" bind:scroll="onPullScroll">
   <t-list id="pull-list" asyncLoading="{{loading}}" bind:scroll="onScroll">
-    <t-cell wx:for="{{listPull}}" wx:key="*this" align="middle">
-      <view class="cell" slot="title">{{item}}</view>
+    <t-cell
+      wx:for="{{listPull}}"
+      wx:key="*this"
+      align="middle"
+      t-class-center="list-cell__center"
+      t-class-note="list-cell"
+    >
+      <view class="cell" slot="note">{{item}}</view>
     </t-cell>
   </t-list>
 </t-pull-down-refresh>
diff --git a/packages/tdesign-miniprogram/site/docs/overview.en-US.md b/packages/tdesign-miniprogram/site/docs/overview.en-US.md
index 2dfc9d038a..ad0f205884 100644
--- a/packages/tdesign-miniprogram/site/docs/overview.en-US.md
+++ b/packages/tdesign-miniprogram/site/docs/overview.en-US.md
@@ -325,6 +325,14 @@ spline: explain
     </a>
   </div>
 
+  <div class="image-wrapper">
+    <a class="item" href="/miniprogram/components/list-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-list.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-list-dark.png" />
+      <p class="name">List</p>
+    </a>
+  </div>
+
   <div class="image-wrapper">
     <a class="item" href="/miniprogram/components/progress-en">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-progress.png" />
diff --git a/packages/tdesign-miniprogram/site/docs/overview.md b/packages/tdesign-miniprogram/site/docs/overview.md
index 2cf4ea685b..21baa868e1 100644
--- a/packages/tdesign-miniprogram/site/docs/overview.md
+++ b/packages/tdesign-miniprogram/site/docs/overview.md
@@ -324,6 +324,14 @@ spline: explain
     </a>
   </div>
 
+  <div class="image-wrapper">
+    <a class="item" href="/miniprogram/components/list">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-list.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-list-dark.png" />
+      <p class="name">List 列表</p>
+    </a>
+  </div>
+
   <div class="image-wrapper">
     <a class="item" href="/miniprogram/components/progress">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-progress.png" />
diff --git a/packages/tdesign-miniprogram/site/site.config.mjs b/packages/tdesign-miniprogram/site/site.config.mjs
index 88149b7841..363eb72302 100644
--- a/packages/tdesign-miniprogram/site/site.config.mjs
+++ b/packages/tdesign-miniprogram/site/site.config.mjs
@@ -469,6 +469,15 @@ export const docs = [
         path: '/miniprogram/components/image-viewer',
         component: () => import('@/image-viewer/README.md'),
       },
+      {
+        title: 'List 列表',
+        titleEn: 'List',
+        name: 'list',
+        meta: { docType: 'data' },
+        path: '/miniprogram/components/list',
+        component: () => import('@/list/README.md'),
+        componentEn: () => import('@/list/README.en-US.md'),
+      },
       {
         title: 'Progress 进度条',
         titleEn: 'Progress',
diff --git a/packages/tdesign-uniapp/example/src/pages.json b/packages/tdesign-uniapp/example/src/pages.json
index 6d58c839f8..122485e948 100644
--- a/packages/tdesign-uniapp/example/src/pages.json
+++ b/packages/tdesign-uniapp/example/src/pages.json
@@ -102,6 +102,9 @@
     {
       "path": "pages-more/image-viewer/image-viewer"
     },
+    {
+      "path": "pages-more/list/list"
+    },
     {
       "path": "pages-more/progress/progress"
     },
@@ -560,6 +563,10 @@
         "name": "image-viewer",
         "pathName": "pages-more/image-viewer/image-viewer"
       },
+      {
+        "name": "list",
+        "pathName": "pages-more/list/list"
+      },
       {
         "name": "progress",
         "pathName": "pages-more/progress/progress"
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/display.json b/packages/tdesign-uniapp/example/src/pages/home/data/display.json
index fabb25665a..535acca824 100644
--- a/packages/tdesign-uniapp/example/src/pages/home/data/display.json
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/display.json
@@ -43,6 +43,10 @@
         "name": "ImageViewer",
         "label": "图片预览"
       },
+      {
+        "name": "List",
+        "label": "列表"
+      },
       {
         "name": "Progress",
         "label": "进度条"
@@ -144,4 +148,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/tdesign-uniapp/global.d.ts b/packages/tdesign-uniapp/global.d.ts
index 6059de61e5..a64796357a 100644
--- a/packages/tdesign-uniapp/global.d.ts
+++ b/packages/tdesign-uniapp/global.d.ts
@@ -40,6 +40,7 @@ declare module 'vue' {
     TIndexesAnchor: typeof import('@tdesign/uniapp/indexes-anchor/indexes-anchor.vue').default;
     TInput: typeof import('@tdesign/uniapp/input/input.vue').default;
     TLink: typeof import('@tdesign/uniapp/link/link.vue').default;
+    TList: typeof import('@tdesign/uniapp/list/list.vue').default;
     TLoading: typeof import('@tdesign/uniapp/loading/loading.vue').default;
     TMessage: typeof import('@tdesign/uniapp/message/message.vue').default;
     TNavbar: typeof import('@tdesign/uniapp/navbar/navbar.vue').default;
diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
index 29021ba78c..844ac9457f 100644
--- a/packages/tdesign-uniapp/package.json
+++ b/packages/tdesign-uniapp/package.json
@@ -284,6 +284,11 @@
       "import": "./dist/link/link.vue",
       "default": "./dist/link/link.vue"
     },
+    "./list/list.vue": {
+      "types": "./dist/types/list.d.ts",
+      "import": "./dist/list/list.vue",
+      "default": "./dist/list/list.vue"
+    },
     "./loading/loading.vue": {
       "types": "./dist/types/loading.d.ts",
       "import": "./dist/loading/loading.vue",
@@ -597,4 +602,4 @@
       "eslint --fix"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/tdesign-uniapp/site/docs.config.js b/packages/tdesign-uniapp/site/docs.config.js
index e7f9707f8b..98c240a69e 100644
--- a/packages/tdesign-uniapp/site/docs.config.js
+++ b/packages/tdesign-uniapp/site/docs.config.js
@@ -505,6 +505,15 @@ export const docs = [
         component: () => import('@/image-viewer/README.md'),
         componentEn: () => import('@/image-viewer/README.en-US.md'),
       },
+      {
+        title: 'List 列表',
+        titleEn: 'List',
+        name: 'list',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/list',
+        component: () => import('@/list/README.md'),
+        componentEn: () => import('@/list/README.en-US.md'),
+      },
       {
         title: 'Progress 进度条',
         titleEn: 'Progress',
diff --git a/packages/tdesign-uniapp/site/docs/overview.en-US.md b/packages/tdesign-uniapp/site/docs/overview.en-US.md
index 1e6896373b..1d597e703d 100644
--- a/packages/tdesign-uniapp/site/docs/overview.en-US.md
+++ b/packages/tdesign-uniapp/site/docs/overview.en-US.md
@@ -332,6 +332,14 @@ spline: explain
     </a>
   </div>
 
+  <div class="image-wrapper">
+    <a class="item" href="/uniapp/components/list-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-list.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-list-dark.png" />
+      <p class="name">List</p>
+    </a>
+  </div>
+
   <div class="image-wrapper">
     <a class="item" href="/uniapp/components/progress-en">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-progress.png" />
diff --git a/packages/tdesign-uniapp/site/docs/overview.md b/packages/tdesign-uniapp/site/docs/overview.md
index 802e81d06c..baab2483d3 100644
--- a/packages/tdesign-uniapp/site/docs/overview.md
+++ b/packages/tdesign-uniapp/site/docs/overview.md
@@ -331,6 +331,14 @@ spline: explain
     </a>
   </div>
 
+  <div class="image-wrapper">
+    <a class="item" href="/uniapp/components/list">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-list.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-list-dark.png" />
+      <p class="name">List 列表</p>
+    </a>
+  </div>
+
   <div class="image-wrapper">
     <a class="item" href="/uniapp/components/progress">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-progress.png" />
diff --git a/packages/uniapp-components/list/README.en-US.md b/packages/uniapp-components/list/README.en-US.md
new file mode 100644
index 0000000000..4505551b34
--- /dev/null
+++ b/packages/uniapp-components/list/README.en-US.md
@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+
+### List Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+async-loading | String | - | \- | N
+footer | String | - | \- | N
+header | String | - | \- | N
+
+### List Events
+
+name | params | description
+-- | -- | --
+load-more | \- | \-
+scroll | `(bottomDistance: number, scrollTop: number)` | \-
+
+### List Slots
+
+name | Description
+-- | --
+async-loading | \-
+footer | \-
+header | \-
diff --git a/packages/uniapp-components/list/README.md b/packages/uniapp-components/list/README.md
new file mode 100644
index 0000000000..6c05480865
--- /dev/null
+++ b/packages/uniapp-components/list/README.md
@@ -0,0 +1,48 @@
+---
+title: List 列表
+description: 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
+spline: base
+isComponent: true
+---
+
+## 代码演示
+
+### 组件类型
+
+#### 基础列表
+
+{{ base }}
+
+#### 下拉刷新
+
+{{ pull-refresh }}
+
+#### 错误提示
+
+{{ err-tip }}
+
+## API
+
+### List Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+async-loading | String | - | 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容 | N
+footer | String | - | 底部 | N
+header | String | - | 头部 | N
+
+### List Events
+
+名称 | 参数 | 描述
+-- | -- | --
+load-more | \- | 点击加载更多时触发
+scroll | `(bottomDistance: number, scrollTop: number)` | 列表滚动时触发，bottomDistance 表示底部距离；scrollTop 表示顶部滚动距离
+
+### List Slots
+
+名称 | 描述
+-- | --
+async-loading | 自定义 `async-loading` 显示内容
+footer | 自定义 `footer` 显示内容
+header | 自定义 `header` 显示内容
diff --git a/packages/uniapp-components/list/_example/base/index.vue b/packages/uniapp-components/list/_example/base/index.vue
new file mode 100644
index 0000000000..fba0922dd7
--- /dev/null
+++ b/packages/uniapp-components/list/_example/base/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <t-list
+    :async-loading="loading"
+    @scroll="onScroll"
+  >
+    <t-cell
+      v-for="item in list"
+      :key="item"
+      align="middle"
+      t-class-center="list-cell__center"
+      t-class-note="list-cell"
+      note-style="justify-content: center"
+    >
+      <template #note>
+        <view class="cell">
+          {{ item }}
+        </view>
+      </template>
+    </t-cell>
+  </t-list>
+</template>
+
+<script>
+import TCell from '@tdesign/uniapp/cell/cell.vue';
+import TList from '@tdesign/uniapp/list/list.vue';
+
+const ONCE_LOAD_NUM = 20;
+const MAX_DATA_LEN = 60;
+
+export default {
+  components: {
+    TCell,
+    TList,
+  },
+  data() {
+    return {
+      list: [],
+      loading: '',
+    };
+  },
+  mounted() {
+    this.onLoad();
+  },
+  methods: {
+    loadData(isRefresh = false) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const nextList = isRefresh ? [] : [...this.list];
+
+          for (let i = 0; i < ONCE_LOAD_NUM; i += 1) {
+            nextList.push(`${nextList.length + 1}`);
+          }
+
+          this.list = nextList;
+          resolve();
+        }, 1000);
+      });
+    },
+
+    onLoad(isRefresh = false) {
+      if ((this.list.length >= MAX_DATA_LEN && !isRefresh) || this.loading) return;
+
+      this.loading = 'loading';
+      this.loadData(isRefresh).then(() => {
+        this.loading = '';
+      });
+    },
+
+    onScroll(bottomDistance) {
+      if (bottomDistance < 50) {
+        this.onLoad();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  width: 100%;
+}
+
+.cell {
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/packages/uniapp-components/list/_example/err-tip/index.vue b/packages/uniapp-components/list/_example/err-tip/index.vue
new file mode 100644
index 0000000000..c32268cc30
--- /dev/null
+++ b/packages/uniapp-components/list/_example/err-tip/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <t-list
+    :async-loading="loading"
+    @scroll="onLoadMore"
+  >
+    <t-cell
+      v-for="item in listError"
+      :key="item"
+      align="middle"
+      t-class-center="list-cell__center"
+      t-class-note="list-cell"
+      note-style="justify-content: center"
+    >
+      <template #note>
+        <view class="cell">
+          {{ item }}
+        </view>
+      </template>
+    </t-cell>
+    <template #footer>
+      <t-loading
+        v-if="showError"
+        :indicator="false"
+        @click.stop="onLoadMore"
+      >
+        <view class="custom-error">
+          请求失败，点击重新<text>加载</text>
+        </view>
+      </t-loading>
+    </template>
+  </t-list>
+</template>
+
+<script>
+import TCell from '@tdesign/uniapp/cell/cell.vue';
+import TList from '@tdesign/uniapp/list/list.vue';
+import TLoading from '@tdesign/uniapp/loading/loading.vue';
+
+export default {
+  components: {
+    TCell,
+    TLoading,
+    TList,
+  },
+  data() {
+    return {
+      listError: [],
+      loading: '',
+      showError: false,
+    };
+  },
+  mounted() {
+    this.onLoadError();
+  },
+  methods: {
+    onLoadError() {
+      this.loading = 'loading';
+
+      setTimeout(() => {
+        for (let i = 0; i < 8; i += 1) {
+          this.listError.push(`${this.listError.length + 1}`);
+        }
+        this.showError = true;
+        this.loading = '';
+      }, 1000);
+    },
+
+    onLoadMore() {
+      this.showError = false;
+      if (this.listError.length >= 60 || this.loading) return;
+
+      this.loading = 'loading';
+
+      setTimeout(() => {
+        for (let i = 0; i < 15; i += 1) {
+          this.listError.push(`${this.listError.length + 1}`);
+        }
+        this.loading = '';
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  width: 100%;
+}
+
+.cell {
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/packages/uniapp-components/list/_example/list.less b/packages/uniapp-components/list/_example/list.less
new file mode 100644
index 0000000000..d077823bed
--- /dev/null
+++ b/packages/uniapp-components/list/_example/list.less
@@ -0,0 +1,25 @@
+page {
+  background-color: var(--td-bg-color-page);
+}
+
+.demo {
+  padding-bottom: 32rpx;
+}
+
+.list-demo {
+  .custom-error {
+    font-size: 28rpx;
+    color: var(--td-text-color-placeholder);
+    text-align: center;
+    padding-top: 32rpx;
+  }
+
+  .custom-error text {
+    color: var(--td-brand-color);
+  }
+
+  .t-button {
+    margin: 0 32rpx 32rpx;
+    width: calc(100% - 64rpx);
+  }
+}
diff --git a/packages/uniapp-components/list/_example/list.vue b/packages/uniapp-components/list/_example/list.vue
new file mode 100644
index 0000000000..2708072e98
--- /dev/null
+++ b/packages/uniapp-components/list/_example/list.vue
@@ -0,0 +1,82 @@
+<template>
+  <view>
+    <t-demo-navbar title="List" />
+    <view class="demo list-demo">
+      <t-demo-header
+        v-if="currentTab === 'info'"
+        title="List 列表"
+        desc="瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。"
+      />
+      <t-demo
+        v-if="currentTab === 'info'"
+        title="01 类型"
+        desc="基础列表"
+      >
+        <t-button
+          size="large"
+          variant="outline"
+          theme="primary"
+          @click="onChangeTab('base')"
+        >
+          基础列表
+        </t-button>
+        <t-button
+          size="large"
+          variant="outline"
+          theme="primary"
+          @click="onChangeTab('pull-refresh')"
+        >
+          下拉刷新
+        </t-button>
+        <t-button
+          size="large"
+          variant="outline"
+          theme="primary"
+          @click="onChangeTab('error-tip')"
+        >
+          错误提示
+        </t-button>
+      </t-demo>
+
+      <base-demo v-if="currentTab === 'base'" />
+      <err-tip-demo v-if="currentTab === 'error-tip'" />
+      <view
+        v-if="currentTab === 'pull-refresh'"
+        class="pull-refresh-wrap"
+      >
+        <pull-refresh-demo />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import TButton from '@tdesign/uniapp/button/button.vue';
+
+import BaseDemo from './base/index.vue';
+import ErrTipDemo from './err-tip/index.vue';
+import PullRefreshDemo from './pull-refresh/index.vue';
+
+export default {
+  components: {
+    TButton,
+    BaseDemo,
+    ErrTipDemo,
+    PullRefreshDemo,
+  },
+  data() {
+    return {
+      currentTab: 'info',
+    };
+  },
+  methods: {
+    onChangeTab(value) {
+      this.currentTab = value;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import './list.less';
+</style>
diff --git a/packages/uniapp-components/list/_example/pull-refresh/index.vue b/packages/uniapp-components/list/_example/pull-refresh/index.vue
new file mode 100644
index 0000000000..a1574b02ba
--- /dev/null
+++ b/packages/uniapp-components/list/_example/pull-refresh/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <t-pull-down-refresh
+    v-model="refreshing"
+    @refresh="onRefresh"
+  >
+    <t-list
+      :async-loading="loading"
+      @scroll="onScroll"
+    >
+      <t-cell
+        v-for="item in listPull"
+        :key="item"
+        align="middle"
+        t-class-center="list-cell__center"
+        t-class-note="list-cell"
+        note-style="justify-content: center"
+      >
+        <template #note>
+          <view class="cell">
+            {{ item }}
+          </view>
+        </template>
+      </t-cell>
+    </t-list>
+  </t-pull-down-refresh>
+</template>
+
+<script>
+import TCell from '@tdesign/uniapp/cell/cell.vue';
+import TList from '@tdesign/uniapp/list/list.vue';
+import TPullDownRefresh from '@tdesign/uniapp/pull-down-refresh/pull-down-refresh.vue';
+
+const ONCE_LOAD_NUM = 20;
+const MAX_DATA_LEN = 60;
+
+export default {
+  components: {
+    TCell,
+    TList,
+    TPullDownRefresh,
+  },
+  data() {
+    return {
+      listPull: [],
+      loading: '',
+      refreshing: false,
+    };
+  },
+  mounted() {
+    this.onLoadPull();
+  },
+  methods: {
+    loadData(isRefresh = false) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const nextList = isRefresh ? [] : [...this.listPull];
+
+          for (let i = 0; i < ONCE_LOAD_NUM; i += 1) {
+            nextList.push(`${nextList.length + 1}`);
+          }
+
+          this.listPull = nextList;
+          resolve();
+        }, 1000);
+      });
+    },
+
+    onLoadPull(isRefresh = false) {
+      if ((this.listPull.length >= MAX_DATA_LEN && !isRefresh) || this.loading) return;
+
+      this.loading = 'loading';
+      this.loadData(isRefresh).then(() => {
+        this.loading = '';
+        this.refreshing = false;
+      });
+    },
+
+    onScroll(bottomDistance) {
+      if (bottomDistance < 50) {
+        this.onLoadPull();
+      }
+    },
+
+    onRefresh() {
+      this.refreshing = true;
+      this.onLoadPull(true);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  width: 100%;
+}
+
+.cell {
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/packages/uniapp-components/list/list.less b/packages/uniapp-components/list/list.less
new file mode 100644
index 0000000000..dc124a553d
--- /dev/null
+++ b/packages/uniapp-components/list/list.less
@@ -0,0 +1,14 @@
+@import '../common/style/base.less';
+
+@list: ~'@{prefix}-list';
+
+.@{list} {
+  &__loading {
+    display: inline-flex;
+    margin: 20rpx 0 8rpx;
+
+    &--wrapper {
+      text-align: center;
+    }
+  }
+}
diff --git a/packages/uniapp-components/list/list.vue b/packages/uniapp-components/list/list.vue
new file mode 100644
index 0000000000..42ec354416
--- /dev/null
+++ b/packages/uniapp-components/list/list.vue
@@ -0,0 +1,99 @@
+<template>
+  <view
+    :style="'' + tools._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+  >
+    <view v-if="header">
+      {{ header }}
+    </view>
+    <slot name="header" />
+
+    <slot />
+
+    <view
+      :class="classPrefix + '__loading--wrapper'"
+      @click="onLoadMore"
+    >
+      <t-loading
+        v-if="asyncLoading === 'loading' || asyncLoading === 'load-more'"
+        :indicator="asyncLoading === 'loading'"
+        :text="asyncLoading === 'loading' ? globalConfig.loading : globalConfig.loadingMoreText"
+        :t-class="classPrefix + '__loading ' + tClassLoading"
+      />
+      <block v-else>
+        <slot name="async-loading" />
+        <slot name="asyncLoading" />
+      </block>
+    </view>
+
+    <view v-if="footer">
+      {{ footer }}
+    </view>
+    <slot name="footer" />
+  </view>
+</template>
+
+<script>
+import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
+import { getRect, systemInfo } from '../common/utils';
+import tools from '../common/utils.wxs';
+import TLoading from '../loading/loading';
+import pageScrollMixin from '../mixins/page-scroll';
+import usingConfig from '../mixins/using-config';
+
+import props from './props';
+
+const componentName = 'list';
+const name = `${prefix}-${componentName}`;
+
+export default {
+  components: {
+    TLoading,
+  },
+  emits: ['load-more', 'scroll'],
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [`${prefix}-class`, `${prefix}-class-loading`],
+    mixins: [usingConfig({ componentName }), pageScrollMixin()],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+      };
+    },
+    methods: {
+      onLoadMore() {
+        if (this.asyncLoading === 'load-more') {
+          this.$emit('load-more');
+        }
+      },
+
+      onScroll(event) {
+        // #ifdef H5
+        if (event && typeof event.scrollHeight === 'number') {
+          const scrollTop = event.scrollTop || document.documentElement.scrollTop || document.body.scrollTop || 0;
+          const offsetHeight = event.offsetHeight || systemInfo.windowHeight;
+          this.$emit('scroll', event.scrollHeight - (scrollTop + offsetHeight), scrollTop);
+          return;
+        }
+        // #endif
+
+        const scrollTop = event?.scrollTop || 0;
+        getRect(this, `.${name}`).then((rect) => {
+          this.$emit('scroll', rect.bottom - systemInfo.windowHeight, scrollTop);
+        });
+      },
+    },
+  }),
+};
+</script>
+
+<style src="./list.css" scoped></style>
diff --git a/packages/uniapp-components/list/props.ts b/packages/uniapp-components/list/props.ts
new file mode 100644
index 0000000000..b2c1ecef7d
--- /dev/null
+++ b/packages/uniapp-components/list/props.ts
@@ -0,0 +1,30 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容 */
+  asyncLoading: {
+    type: String,
+  },
+  /** 底部 */
+  footer: {
+    type: String,
+  },
+  /** 头部 */
+  header: {
+    type: String,
+  },
+  /** 点击加载更多时触发 */
+  onLoadMore: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 列表滚动时触发，bottomDistance 表示底部距离；scrollTop 表示顶部滚动距离 */
+  onScroll: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/uniapp-components/list/type.ts b/packages/uniapp-components/list/type.ts
new file mode 100644
index 0000000000..f0a1a756a9
--- /dev/null
+++ b/packages/uniapp-components/list/type.ts
@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdListProps {
+  /**
+   * 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容
+   */
+  asyncLoading?: string;
+  /**
+   * 底部
+   */
+  footer?: string;
+  /**
+   * 头部
+   */
+  header?: string;
+  /**
+   * 点击加载更多时触发
+   */
+  onLoadMore?: () => void;
+  /**
+   * 列表滚动时触发，bottomDistance 表示底部距离；scrollTop 表示顶部滚动距离
+   */
+  onScroll?: (bottomDistance: number, scrollTop: number) => void;
+}