简介

动作面板组件是一个从屏幕底部弹出的菜单列表或者宫格，承载一组相关的操作动作。支持三种展示类型：居中列表、居左列表和宫格布局，可自定义标题、副标题、图标和取消按钮样式。适用于分享、选择、操作等场景。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-action-sheet": "ava-ui/fxui/fs-action-sheet/index"
}

代码演示

基础用法

列表展示类型

支持两种列表展示类型，满足不同场景需求：

• 居中列表（center）：选项居中对齐，适用于操作按钮等场景
• 居左列表（left）：选项左对齐，适用于菜单选择等场景

宫格展示类型

宫格布局适用于功能入口、分享等场景，支持图标和文字的组合展示：

• 支持图片和字体图标
• 自动换行布局
• 支持禁用状态

选项状态

支持设置选项的不同状态，包括正常、警示和禁用状态：

• normal/default：正常状态（默认）
• danger：警示状态，通常显示为红色
• disabled：禁用状态，不可点击

超长内容

支持超长内容的滚动展示，自动计算内容高度：

• 内容超出时自动显示滚动条
• 支持增强滚动体验
• 自动隐藏滚动条

API

参数

参数	说明	类型	可选值	默认值
show	是否显示动作面板	boolean	—	false
displayType	展示类型	string	center/left/grid	'center'
supportIcon	是否支持图标（仅列表模式生效）	boolean	—	false
title	标题	string	—	''
subtitle	副标题	string	—	''
options	选项数据列表	array	—	[]
showCancel	是否显示取消按钮	boolean	—	true
cancelText	取消按钮文本	string	—	'取消'

事件

事件名	说明	回调参数
itemClick	点击选项时触发
close	关闭面板时触发
overlayEnter	遮罩层进入时触发	—
overlayLeave	遮罩层离开时触发	—

数据格式

// 选项数据格式
const options = [
  {
    label: '选项1',           // 选项文本
    icon: 'star',            // 图标（字体图标名或图片URL）
    subtitle: '副标题',       // 副标题（仅列表模式支持）
    status: 'normal'         // 状态：normal/default（正常）/ danger（警示）/ disabled（禁用）
  },
  // ... 更多选项
]

展示类型说明

列表模式（center/left）

• center：选项居中对齐，适用于操作按钮等场景
• left：选项左对齐，适用于菜单选择等场景
• 支持 supportIcon 属性显示图标
• 支持 subtitle 显示副标题

宫格模式（grid）

• 自动换行布局
• 支持图片和字体图标
• 图标和文字垂直排列
• 不支持副标题

图标支持

组件支持两种类型的图标：

1. 字体图标：使用 fxui_all 字体图标库，直接传入图标名称
2. 图片图标：支持网络图片、本地图片等URL格式

图标URL支持以下协议：

• https:// / http://：网络图片
• ava:// / fs:// / bundle://：本地资源
• event:// / cml:// / weex:// / native://：特殊协议

注意事项

• 组件会自动处理物理返回键的关闭事件
• 宫格模式下不支持 supportIcon 属性
• 禁用状态的选项不会触发 itemClick 事件
• 内容超出时会自动显示滚动条
• 取消按钮文本支持国际化配置
• 组件使用 fs-overlay 作为遮罩层组件
• 支持增强滚动体验，自动隐藏滚动条

打开预览