fs-grid-more

约 996 字大约 3 分钟

2026-06-25

基于fs-grid、fs-grid-item和fs-card封装的高级网格组件，支持通过options数组配置选项，并提供"更多"功能来处理选项过多的情况。内置fs-card卡片容器，提供完整的卡片化展示方案。

引入

{
  "usingComponents": {
    "fs-grid-more": "/avaui-sub/fs-grid-more/index"
  }
}

如果是在avaui-sub分包中使用，需要添加componentPlaceholder配置：

"componentPlaceholder": {
  "fs-grid-more": "view",
  "fs-grid": "view",
  "fs-grid-item": "view",
  "fs-card": "view"
}

代码演示

入口过多情况处理

特性

内置卡片容器

组件内置fs-card卡片容器，提供：

统一样式：标准的卡片样式和布局
标题支持：支持卡片标题显示
操作区域：支持actions slot添加操作按钮
灵活配置：通过cardConfig统一配置卡片属性

入口过多情况处理

区域内的最后一个icon为"更多"
- 设置maxCount限制显示数量
- 自动在最后位置显示"更多"按钮
- 支持自定义"更多"按钮样式
- 监听moreClick事件跳转到新页面
标题栏右侧显示下钻入口
- 使用actions slot添加"更多"按钮
- 通过自定义事件处理跳转
横向滑动展示
- 设置swiperConfig启用滑动模式
- 选项按pageSize分页显示
- 支持横向滑动切换页面
- 底部显示页面指示器
- 支持自定义指示器颜色和循环滑动

API

属性

属性名	类型	默认值	说明
options	Array	[]	选项数据数组，详见下方options说明
columns	Number	4	列数
layout	String	'vertical'	布局方式：vertical(上下) / horizontal(左右)
align	String	'center'	对齐方式：left(左对齐) / center(居中) / right(右对齐)
textColor	String	''	文字颜色
descriptionColor	String	''	描述文字颜色
swiperConfig	Object	见下方说明	滑动配置，包含swiper相关属性
moreConfig	Object	见下方说明	"更多"按钮配置，包含数量限制
cardConfig	Object	见下方说明	卡片配置，包含fs-card相关属性
extStyle	String	''	外部样式

options数组项属性

属性名	类型	默认值	说明
icon	String/Object	''	图标配置，参考fs-icon组件
text	String	''	文字内容
description	String	''	描述文字
badge	String/Number/Object	''	徽章配置，参考fs-badge组件
value	String	''	选项值，用于标识
extStyle	String	''	单个选项的外部样式

moreConfig对象属性

属性名	类型	默认值	说明
maxCount	Number	0	最大显示数量，0表示不限制，超过显示"更多"
text	String	'更多'	"更多"按钮文字
icon	String/Object	'gengduo'	"更多"按钮图标
description	String	''	"更多"按钮描述
extStyle	String	''	"更多"按钮外部样式

swiperConfig对象属性

属性名	类型	默认值	说明
enable	Boolean	false	是否启用横向滑动模式
pageSize	Number	8	滑动模式下每页显示的数量
showIndicator	Boolean	true	是否显示滑动指示器，显示时swiper高度自动增加24px
indicatorColor	String	'rgba(0, 0, 0, .3)'	指示器颜色
indicatorActiveColor	String	'#1890ff'	指示器激活状态颜色
circular	Boolean	false	是否启用循环滑动

cardConfig对象属性

属性名	类型	默认值	说明
title	String	''	卡片标题
layoutStyleType	Number	1	布局类型：0-通栏卡片 1-圆角卡片
size	String	'large'	卡片尺寸：large/small
layout	Number	1	布局规格：1-首页/详情页 2-新建编辑页

更多fs-card配置选项请参考 fs-card组件文档

Slot

名称	说明
actions	卡片操作区，对应fs-card的actions slot

事件

事件名	说明	参数
itemClick	点击选项时触发
moreClick	点击"更多"按钮时触发
pageChange	滑动切换页面时触发

使用示例

横向滑动模式

<fs-grid-more
  options="{{allOptions}}"
  columns="{{4}}"
  cardConfig="{{cardConfig}}"
  swiperConfig="{{swiperConfig}}"
  bind:itemClick="onItemClick"
  bind:pageChange="onPageChange"
></fs-grid-more>

打开预览