外观
Cell 单元格
约 1487 字大约 5 分钟
2025-10-31
cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
基础功能
该组件需要搭配cell-group使用，通过title设置左侧标题，value设置右侧内容，通过label添加描述信息。
<un-cell-group>
<un-cell title="uView Next" value="内容" :isLink="true"></un-cell>
<un-cell title="利剑出鞘,一统江湖" value="内容" label="挣脱束缚,向往自由"></un-cell>
</un-cell-group>自定义图标/图片
通过icon属性可以设置图标名称或图片链接，支持本地图标和网络图片。
<un-cell-group>
<un-cell title="单元格" icon="lock-fill"></un-cell>
<un-cell title="单元格" icon="https://cdn.uviewui.com/uview/example/tag.png"></un-cell>
</un-cell-group>自定义大小
通过设置size属性为large，可以创建更大的单元格，适用于需要突出显示的场景。
<un-cell-group>
<un-cell size="large" title="单元格" value="内容" isLink></un-cell>
<un-cell size="large" title="单元格" value="内容" label="描述信息"></un-cell>
</un-cell-group>显示右箭头
设置isLink为true，将会显示右侧的箭头，可以通过arrow-direction控制箭头的方向，包括up、down、left、right。
<un-cell-group>
<un-cell required title="单元格" value="组件" isLink></un-cell>
<un-cell title="单元格" value="工具" arrow-direction="up" isLink></un-cell>
<un-cell title="单元格" value="模板" arrow-direction="down" isLink></un-cell>
</un-cell-group>跳转页面
设置isLink为true，单元格点击可跳转页面，通过url属性设置跳转地址。
<un-cell-group>
<un-cell title="打开标签页" isLink url="/pages/componentsB/tag/tag"></un-cell>
<un-cell title="打开徽标页" isLink url="/pages/componentsB/badge/badge"></un-cell>
</un-cell-group>右侧内容垂直居中
设置center为true，可将右侧内容垂直居中，适用于需要调整对齐方式的场景。
<un-cell-group>
<un-cell title="单元格" value="内容" label="描述信息" center></un-cell>
</un-cell-group>自定义插槽
通过插槽可以自定义单元格的内容，title插槽自定义左侧区域内容，value插槽自定义右侧区域内容。
<un-cell-group>
<un-cell value="内容">
<template #title>
<view class="u-slot-title">
<text class="un-cell-text">单元格</text>
<un-tag text="标签" plain size="mini" type="warning"></un-tag>
</view>
</template>
</un-cell>
<un-cell title="单元格" isLink>
<template #value>
<text>99</text>
</template>
</un-cell>
</un-cell-group>API
CellGroup Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 分组标题 | string | - |
| border | 是否显示外边框 | boolean | true |
| round | 设置圆角值 | string | - |
| borderColor | 边框颜色 | string | - |
| backgroundColor | 背景颜色 | string | - |
Cell Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 左侧标题 | string | number | - |
| label | 标题下方的描述信息 | string | number | - |
| value | 右侧的内容 | string | number | - |
| icon | 左侧图标名称，或者图片链接(本地文件建议使用绝对地址) | string | - |
| disabled | 是否禁用cell | boolean | false |
| border | 是否显示下边框 | boolean | true |
| borderColor | 边框颜色 | string | - |
| center | 内容是否垂直居中(主要是针对右侧的value部分) | boolean | false |
| url | 点击后跳转的URL地址 | string | - |
| linkType | 链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作 | Enum | navigateTo |
| clickable | 是否开启点击反馈(表现为点击时加上灰色背景) | boolean | false |
| isLink | 是否展示右侧箭头并开启点击反馈 | boolean | false |
| required | 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) | boolean | false |
| rightIcon | 右侧的图标箭头 | string | arrow-right |
| arrowDirection | 右侧箭头的方向 | Enum | right |
| iconStyle | 左侧图标样式 | object | string | - |
| rightIconStyle | 右侧箭头图标的样式 | object | string | - |
| titleStyle | 标题的样式 | object | string | - |
| size | 单位元的大小，可选值为large | Enum | - |
| stop | 点击cell是否阻止事件传播 | boolean | true |
| name | 标识符，用于在click事件中进行返回 | string | number | - |
Cell Slot
| 名称 | 说明 |
|---|---|
| title | 自定义左侧标题部分的内容 |
| value | 自定义右侧标题部分的内容 |
| icon | 自定义左侧的图标 |
| right-icon | 自定义右侧图标内容，需设置arrow为false才起作用 |
| label | 自定义label内容 |
Cell Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 点击cell列表时触发 | Function |
Scss 变量
关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-cell-padding | 10px 15px | 单元格内边距 |
| $un-cell-large-padding | 13px 15px | 大尺寸单元格内边距 |
| $un-cell-line-bg-color | $border-color | 单元格边框背景颜色 |
| $un-cell-line-height | 1px | 单元格边框高度 |
| $un-cell-line-transform | scaleY(0.5) | 单元格边框缩放比例 |
| $un-cell-left-icon-wrap-margin-right | 4px | 左侧图标容器右边距 |
| $un-cell-right-icon-wrap-margin-left | 4px | 右侧图标容器左边距 |
| $un-cell-right-icon-wrap-transition | transform 0.3s | 右侧图标容器过渡效果 |
| $un-cell-title-text-font-size | $text-base | 标题字体大小 |
| $un-cell-title-text-line-height | $line-base | 标题行高 |
| $un-cell-title-text-color | $text-color | 标题颜色 |
| $un-cell-title-text-large-font-size | $text-lg | 大尺寸标题字体大小 |
| $un-cell-label-margin-top | 5px | 标签上边距 |
| $un-cell-label-font-size | $text-sm | 标签字体大小 |
| $un-cell-label-color | $text-color-muted | 标签颜色 |
| $un-cell-label-line-height | $line-sm | 标签行高 |
| $un-cell-label-large-font-size | $text-base | 大尺寸标签字体大小 |
| $un-cell-value-font-size | $text-sm | 右侧内容字体大小 |
| $un-cell-value-line-height | $line-sm | 右侧内容行高 |
| $un-cell-value-color | $text-color-muted | 右侧内容颜色 |
| $un-cell-value-large-font-size | $text-base | 大尺寸右侧内容字体大小 |
| $un-cell-required-font-size | $text-base | 必填星号字体大小 |
| $un-cell-required-color | $color-error | 必填星号颜色 |
| $un-cell-required-left | -6px | 必填星号左边距 |
| $un-cell-required-top | -2px | 必填星号上边距 |
| $un-cell-clickable-bg-color | $bg-color | 点击反馈背景颜色 |
| $un-cell-disabled-color | $text-color-disabled | 禁用状态颜色 |