fs-bottom-action-bar

约 920 字大约 3 分钟

简介

左右布局的底部操作栏组件，左侧为可自定义的 slot 区域，右侧为按钮列表。支持多种按钮布局形态（居左/居右/居中/均分），按钮超过可见数量时自动收纳到"更多"按钮中。

使用方法

在页面或组件的 index.json 中配置：

{
  "usingComponents": {
    "fs-bottom-action-bar": "/avaui-sub/fs-bottom-action-bar/index"
  },
  "componentPlaceholder": {
    "fs-bottom-action-bar": "view"
  }
}

PWC（自定义组件/插件）使用：仅 usingComponents 注册方式使用 avaComponent:// 协议，其他用法与局部引入一致。

{
  "usingComponents": {
    "fs-bottom-action-bar": "avaComponent://avaui-sub/fs-bottom-action-bar/index"
  }
}

组件内置了 DialogCenter，页面无需额外添加。

代码演示

API

属性

属性	说明	类型	默认值
buttons	按钮列表	array	`[]`
buttonLayout	按钮布局：`left` 居左 / `right` 居右 / `center` 居中 / `justify` 均分	string	`'left'`
buttonReverse	按钮是否倒序（更多按钮在左侧）	boolean	`false`
showSafe	是否展示底部安全距离	boolean	`true`
hasTopLine	是否展示顶部分割线	boolean	`true`
visibleCount	可见按钮个数，超出部分收纳到"更多"中	number	`3`
showAllBtnWhenMoreOnlyOne	更多区仅剩 1 个按钮时，是否直接展开全部	boolean	`false`
baseStyle	容器附加样式	string	`''`
leftStyle	左侧容器附加样式	string	`''`
rightStyle	右侧容器附加样式	string	`''`
moreBtnInfo	自定义更多按钮配置（见下方）	object	`null`

moreBtnInfo 配置

属性	说明	类型	默认值
text	按钮文字	string	—
theme	按钮主题	string	`'default'`
variant	按钮风格	string	`'outline'`
size	按钮尺寸	string	继承首个可见按钮
icon	图标类名	string	`'titlebar_more_black'`
btnStyle	按钮样式（默认 `width: 40px; height: 40px`）	string	—
onClick	点击回调	function	—

buttons 数组项

属性	说明	类型	默认值
text	按钮文本	string	—
theme	主题：`default` / `primary` / `warn`	string	`'default'`
variant	风格：`base` / `outline` / `text`	string	`'base'`
size	尺寸：`micro` / `mini` / `small` / `medium` / `large`	string	`'small'`
disabled	是否禁用	boolean	`false`
icon	图标类名	string	`''`
iconPosition	图标位置：`left` / `right`	string	`'left'`
shape	形状：`rect` / `square` / `round-rect` / `circle`	string	`'rect'`
loading	是否加载中	boolean	`false`
btnStyle	按钮自定义样式	string	`''`
textStyle	文本自定义样式	string	`''`
onClick	按钮点击回调（优先级高于 `buttonClick` 事件）	function	—

Events

事件名	说明	参数
buttonClick	按钮点击	`{ button, index }`
bottomActionBarInfo	组件高度变化	`{ height, width, top, bottom, left, right }`

Slots

插槽名	说明
left	左侧内容区域

使用示例

基础用法

<fs-bottom-action-bar
  buttons="{{buttons}}"
  bind:buttonClick="onButtonClick">
  <view slot="left" class="user-info">
    <text>左侧内容</text>
  </view>
</fs-bottom-action-bar>

Page({
  data: {
    buttons: [
      { text: '编辑', theme: 'primary', variant: 'base' },
      { text: '删除', theme: 'warn', variant: 'outline' }
    ]
  },
  onButtonClick(e) {
    const { button, index } = e.detail;
    console.log('点击了:', button.text);
  }
});

不同布局

<!-- 居左（默认） -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="left" />

<!-- 居右 -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="right" />

<!-- 居中 -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="center" />

<!-- 均分 -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="justify" />

倒序展示

<fs-bottom-action-bar buttons="{{buttons}}" buttonReverse="{{true}}" />

自定义可见按钮个数

<!-- 显示前2个，其余收入"更多" -->
<fs-bottom-action-bar buttons="{{buttons}}" visibleCount="{{2}}" />

注意事项

按钮超过 visibleCount 个时，超出部分自动收纳到"更多"按钮的 actionsheet 中
"更多"按钮默认尺寸为 40px × 40px，justify 布局下保持固定尺寸
actionsheet 回调使用 res.idx 而非 res.index
组件依赖 fs-button 和 DialogCenter（均已内置）
按钮的 onClick 回调优先级高于组件的 buttonClick 事件

打开预览