# @hzab/list-render-mobile

> 移动端列表组件

Latest version **1.2.7** (published 2026-09-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install @hzab/list-render-mobile
pnpm add @hzab/list-render-mobile
yarn add @hzab/list-render-mobile
bun add @hzab/list-render-mobile
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.2.7 |
| Published | 2026-09-15 |
| First published | 2023-08-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | CaiYansong |
| Maintainers | caiyansong, yansongcai |

## Links

- npm: https://www.npmjs.com/package/@hzab/list-render-mobile
- npm.io page: https://npm.io/package/@hzab/list-render-mobile

## Recent versions

- 1.2.7 (latest) — 2026-09-15
- 1.2.6 — 2026-09-15
- 1.2.4 — 2026-09-14
- 1.2.3 — 2025-11-04
- 1.2.2 — 2025-11-04
- 1.2.1 — 2025-10-15
- 1.2.0 — 2025-07-18
- 1.1.7 — 2025-04-08
- 1.1.6 — 2024-11-04
- 1.1.5 — 2024-10-31
- 1.1.4 — 2024-08-08
- 1.1.3 — 2024-08-07
- 1.1.2 — 2024-08-05
- 1.1.1 — 2024-08-04
- 1.1.0 — 2024-08-04
- … 16 more at https://npm.io/package/@hzab/list-render-mobile/versions

## README

# @hzab/list-render-mobile

组件模板

- Node.js ≥ 24

## 安装

```bash
pnpm add @hzab/list-render-mobile
```

本包同时发布到**公共 npm**（`registry.npmjs.org`，public access）与企业私有源（ld / old）。
默认源可直接安装，无需额外配置；若团队要求走内网源，见[消费方接入指南](../../../docs/consumer-access.md#2-可选改为从企业私有源安装)。

消费方需自备 peerDependencies：`@hzab/data-model`、`antd-mobile`、`antd-mobile-icons`、`react`、`react-dom`、`react-virtualized`（本包不会随包安装）。

引入方式见下方「组件」章节。

> **发布形态**：本包在本仓以**源码直出**方式发布——`main` 指向 `src`，由消费方打包器编译
> TypeScript 与 `.less` 样式；`@hzab/list-render-mobile/src/*` 深路径同样可直接引用。随包发布的 `dist/` 仅用于
> 类型解析（`types` → `dist/index.d.ts`），不是运行时入口。

# 组件

## 注意事项

- new DataModel() hooks 写法时，注意避免 hooks 重复创建实例，导致 query 丢失
  - 非动态 query 参数使用 modelParams 参数直接自动生成 model。query 中的值必须是实例化的时候就存在（不支持动态 query 参数）。
  - 动态 query 参数使用 useDataModel(); 生成 model。query 允许自行配置监听的动态参数

## 示例

```jsx
import { useDataModel } from "@hzab/data-model";
import Demo from "@hzab/list-render-mobile";

// 使用 modelParams 参数实例化 DataModel，不支持动态参数
function Test() {
  const modelParams = {
    getListApi: "/getList",
    query: { orgId: getUrlParam("orgId") },
  };

  return <Demo modelParams={modelParams} />;
}

// 使用 useDataModel 实例化 DataModel，支持动态参数
function Test2({ orgId }) {
  const model = useDataModel(
    {
      getListApi: "/getList",
      query: { orgId },
    },
    [orgId],
  );

  return <Demo model={model} />;
}
```

## API

### InfoPanel Attributes

| 参数             | 类型     | 必填 | 默认值 | 说明                                                                |
| ---------------- | -------- | ---- | ------ | ------------------------------------------------------------------- |
| model            | Object   | 是   | -      | 数据模型，包含 CURD 接口信息，传入 DataModel 的实例                 |
| modelParams      | Object   | 否   | -      | 不支持动态参数。传入 DataModel 的的参数，内部自动创建 Model 实例。  |
| schema           | Object   |      | -      | 数据信息的 schema                                                   |
| list             | Array    | 否   | -      | 本地列表数据                                                        |
| closeAutoRequest | Boolean  |      | false  | 是否关闭加载完毕后自动发起请求。true 时组件 didMount 不自动发起请求 |
| idKey            | string   | 否   | id     | 唯一值字段的 key                                                    |
| ItemRender       | Function |      | -      | 子项渲染组件                                                        |
| virtualized      | Boolean  |      | false  | 是否启用虚拟滚动                                                    |
| listHeight       | number   |      | -      | 列表高度，优先级大于 isAutoHeight 计算的高度                        |
| isAutoHeight     | Boolean  |      | false  | 是否自动计算高度（视窗到列表顶部的距离，clientHeight - boxRec.top） |
| rowHeight        | number   |      | 10     | 启用虚拟滚动时，每行的高度（单位：像素，优先级高于 pageRow）        |
| pageRow          | number   |      | 10     | 启用虚拟滚动时，每页显示的行数                                      |
| dataType         | string   |      | -      | 传入 localData 支持控制滚动加载数据                                 |

---
_Source: https://npm.io/package/@hzab/list-render-mobile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._