n-group 分组列表

含分组标题的列表
分组与分组项n-group-item联合使用才有意义

平台兼容性

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

示例代码:

<n-group titl="分组标题">
  <n-group-item title="项标题"></n-group-item>
</n-group>

API

属性

Group
参数说明类型默认值可选值示例
title分组标题Stringheight:92rpx-title="标题"
GroupItem
参数说明类型默认值可选值示例
title-icon标题图标,在左侧String/Objectheight:92rpx-title-icon="icon-name"
title标题,在左侧String/Objectheight:92rpx-title="标题"
description描述,在标题下方,宽度左侧同宽,须与content区分开String--description="描述"
value值,在标题右侧String/Number--value="值"
value-icon右侧箭头图标String-字体图标的namevalue-icon="icon-arrowright_bold"
value-float值显示位置
left:靠近title
right:与title两端对齐
Stringleftleft/rightvalue="值" :value-float="right"
content内容,在标题和值的下方,会铺满整行,须与description区分开String--content="内容"
border底部边框Booleantruetrue/false:border="true"border
hover-class点击按下去的样式类,主题$n-page-bgcolor值
当 hover-class="none"或:hover-class="false"时,没有点击态效果
String/Booleannonenone/true/falsehover-class="none"

插槽

参数说明
title-icon自定义左侧标题左边的图标,如需使用,请勿定义title-icon参数,或赋值null即可
title自定义左侧标题部分的内容,如需使用,请勿定义title参数,或赋值null即可
value自定义左侧value的内容,如需使用,请勿定义value参数,或赋值null即可
value-icon自定义右侧的图标,如需使用,请勿定义value-icon参数,或赋值null即可
description自定义标题和value下方的内容,会铺满整行,如需使用,请勿定义description参数,或赋值null即可
default自定义标题和value下方的内容,会铺满整行,如需使用,请勿定义content参数,或赋值null即可
value-extra自定义右侧内容,当定义了此插槽,仍然可以定义value-icon插槽;
但,value-flot='right'时无效

事件

GroupItem
参数说明参数说明
click点击--

疑难杂症

  1. 在微信小程序中,子组件里面无法通过this._events获取调用组件时绑定的事件,因此hover-class需要手动设置,本想通过this._events来判断是否传递了click事件来自动装载class样式