Skip to content

n-cell 单元格 ​

列表行原语:一行之内排开 图标(插槽)/ 标题 / 说明 / 值 / 右侧图标(插槽)/ 箭头,适合设置页、个人中心、表单信息行等成组的列表场景。

  1. 单元格是"行"不是"卡片":默认透明底,表面色由外层容器(页面画布或卡片)决定;需要独立表面时用 custom-style 给底色与圆角
  2. 图标一律放插槽(配合 n-icon),组件不自绘图标;arrow 的箭头是纯 CSS 形(无字体文件依赖),朝向用 arrow-direction 调
  3. 禁用保留配色、整体降透明,并拦截点击(不只是视觉禁用)
  4. open-type 让整行即按钮(仅微信端):分享/客服/手机号等开放能力与事件同 n-button,其余端编译时裁掉

平台兼容性 ​

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ × × × ×

API ​

属性 ​

参数 说明 类型 默认值 可选值
title 左侧标题(内容复杂时改用 title 插槽) String "" -
label 标题下方的说明文字(次要色小字) String "" -
value 右侧的值(次要色、右对齐;内容复杂时改用 value 插槽) String "" -
size 尺寸 String md lg<br/>md<br/>sm
arrow 是否显示右侧箭头(导航/入口形态) Boolean false -
arrow-direction 箭头朝向(仅 arrow 开启时生效,常用于展开/收起行) String right up<br/>down<br/>left<br/>right
open-type 微信小程序开放能力,同原生 button open-type(整行即按钮;仅微信端生效,禁用时自动失效) String "" contact<br/>share<br/>getPhoneNumber<br/>getRealtimePhoneNumber<br/>getUserInfo<br/>launchApp<br/>openSetting<br/>chooseAvatar<br/>agreePrivacyAuthorization<br/>feedback<br/>liveActivity
border 底部分割线(全宽与按压反馈同盒:antd-mobile/Vant/FirstUI 同构;成组竖排时最后一行建议关闭) Boolean true -
required 标题前必填标记(功能色星号,表单行用) Boolean false -
disabled 禁用(保色降透明,拦截点击与按压反馈) Boolean false -
title-style 微调标题的行内样式,如 "font-weight:600" String "" 与 css 相同
label-style 微调说明文字的行内样式 String "" 与 css 相同
value-style 微调值的行内样式,如 "color:#10b981;font-weight:bold" String "" 与 css 相同
custom-class 挂到根节点的额外 class(类需定义在组件样式表内) String "" -
custom-style 根节点行内样式 String "" 与 css 相同

事件 ​

事件名 说明 回调参数
click 点击单元格时触发(禁用时不触发) 事件对象
getuserinfo open-type=getUserInfo 时触发(微信小程序) 事件对象
contact open-type=contact 客服会话回调(微信小程序) 事件对象
getphonenumber open-type=getPhoneNumber 时触发(微信小程序) 事件对象
getrealtimephonenumber open-type=getRealtimePhoneNumber 时触发(微信小程序) 事件对象
error 开放能力发生错误时触发(微信小程序) 事件对象
opensetting open-type=openSetting 授权页关闭后触发(微信小程序) 事件对象
launchapp open-type=launchApp 打开 APP 成功时触发(微信小程序) 事件对象
chooseavatar open-type=chooseAvatar 时触发(微信小程序) 事件对象
agreeprivacyauthorization 用户同意隐私协议时触发(微信小程序) 事件对象
createliveactivity open-type=liveActivity 订阅回调时触发(微信小程序) 事件对象

插槽 ​

插槽名 说明
icon 左侧图标区(配合 n-icon;与标题的间距由组件保证)
title 替换标题文字(自由组合图标、徽标等)
value 替换右侧值(可放任意组件:n-button 行内操作按钮、n-tag 状态标签等)
right-icon 右侧图标区(位于值之后、箭头之前,可与 arrow 共存)

记录 · 思考 · 创作