feat: add list component

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

packages/components/list/README.md

@@ -0,0 +1,54 @@
+---
+title: List 列表
+description: 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
+spline: base
+isComponent: true
+---
+
+## 代码演示
+
+### 组件类型
+
+#### 基础列表
+
+{{ base }}
+
+#### 下拉刷新
+
+{{ pull-refresh }}
+
+#### 错误提示
+
+{{ err-tip }}
+
+## 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 | 加载状态样式类

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"
+  }
+}

packages/components/list/_example/base/index.less

@@ -0,0 +1,12 @@
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  justify-content: center;
+}
+
+.cell {
+  width: 100%;
+  text-align: center;
+}

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();
+      }
+    },
+  },
+});

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" t-class-center="list-cell__center" t-class-note="list-cell">
+    <view class="cell" slot="note">{{item}}</view>
+  </t-cell>
+</t-list>

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"
+  }
+}

packages/components/list/_example/err-tip/index.less

@@ -0,0 +1,20 @@
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  justify-content: center;
+}
+
+.cell {
+  width: 100%;
+  text-align: center;
+}
+
+.custom-error {
+  color: var(--td-text-color-placeholder);
+}
+
+.custom-error text {
+  color: var(--td-brand-color);
+}

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);
+    },
+  },
+});

packages/components/list/_example/err-tip/index.wxml

@@ -0,0 +1,14 @@
+<t-list asyncLoading="{{loading}}" bind:scroll="onLoadMore">
+  <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>
+  </t-loading>
+</t-list>

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"
+  }
+}

packages/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);
+  }
+}

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 });
+  },
+});

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>

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"
+  }
+}

packages/components/list/_example/pull-refresh/index.less

@@ -0,0 +1,12 @@
+.list-cell__center {
+  display: none;
+}
+
+.list-cell {
+  justify-content: center;
+}
+
+.cell {
+  width: 100%;
+  text-align: center;
+}