简介

一个左右布局的底部操作栏组件，左侧为可自定义的 slot 区域，右侧为按钮列表。支持多种按钮布局形态，当按钮超过 3 个时会自动收纳到"更多"按钮中。

功能特性

• ✅ 左右布局，左侧为 slot，右侧为按钮列表
• ✅ 左右布局及内部子组件均垂直居中
• ✅ 支持按钮展示正序、倒序【更多按钮会展示最左侧】
• ✅ 支持是否展示底部安全距离
• ✅ 支持四种按钮展示形态：居左（紧跟左侧内容）、居右（屏幕右侧）、居中（左侧内容和右边缘中间）、按钮均分宽度
• ✅ 按钮间距 8px，边距12px
• ✅ 超过 3 个按钮时自动收纳到"更多"按钮（使用 iconfont 图标和 actionsheet 弹窗）
• ✅ 默认更多按钮宽高为 40px，justify 布局下普通按钮均分，更多按钮保持固定尺寸
• ✅ 使用 ava-ui/fxui/fs-button/index 组件
• ✅ 支持自定义样式：容器样式、左侧样式、右侧样式
• ✅ 支持按钮内置 onClick 回调函数
• ✅ 内置渐变背景样式

使用方法

1. 在页面或组件的 JSON 文件中引入

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

2. 在 WXML 中使用

<fs-bottom-action-bar
  buttons="{{buttons}}"
  button-layout="left"
  base-style="{{customStyle}}"
  left-style="{{leftStyle}}"
  right-style="{{rightStyle}}"
  bind:buttonClick="onButtonClick">
  <view slot="left">
    <!-- 左侧自定义内容 -->
    <text>左侧内容</text>
  </view>
</fs-bottom-action-bar>

<!-- DialogCenter 组件已内置，无需额外添加 -->

3. 在 JS 中定义数据和事件处理

Page({
  data: {
    buttons: [
      {
        text: '编辑',
        theme: 'primary',
        variant: 'base',
        // 可选：内置点击回调
        onClick: (button) => {
          console.log('内置回调:', button.text);
        }
      },
      { text: '删除', theme: 'warn', variant: 'outline' },
      { text: '分享', theme: 'default', variant: 'outline' }
    ],
    customStyle: 'padding: 16px;',
    leftStyle: 'padding-right: 20px;',
    rightStyle: 'padding-left: 10px;'
  },

  onButtonClick(e) {
    const { button, index } = e.detail;
    console.log('点击了按钮:', button.text, '索引:', index);
  }
})

属性说明

属性名	类型	默认值	说明
buttons	Array	[]	按钮列表数据
button-layout	String	'left'	按钮展示形态：'left'(紧跟左侧内容)、'right'(屏幕右侧)、'center'(居中显示)、'justify'(按钮均分)
show-safe	Boolean	true	是否展示底部安全距离
button-reverse	Boolean	null	按钮是否倒序展示：true(按钮正序展示，更多按钮在右侧)、false(按钮倒序展示，更多在左侧)
base-style	String	null	容器附加样式
left-style	String	null	左侧容器附加样式
right-style	String	null	右侧容器附加样式
visible-count	Number	3	可见按钮个数，默认显示前 3 个按钮，其余按钮收纳到更多中
show-all-btn-when-more-only-one	Boolean	false	当更多区只剩 1 个按钮时，是否直接展开显示全部原始按钮
more-btn-info	Object	null	自定义更多按钮配置；未传尺寸/样式字段时，默认宽高仍为 40px

buttons 数组项属性

属性名	类型	默认值	说明
text	String	-	按钮文本
theme	String	'default'	按钮主题：'default'、'primary'、'warn'
variant	String	'base'	按钮风格：'base'、'outline'、'text'
size	String	'small'	按钮尺寸：'micro'、'mini'、'small'、'medium'、'large'
disabled	Boolean	false	是否禁用
btnStyle	String	''	按钮自定义样式
textStyle	String	''	按钮文本自定义样式
icon	String	''	按钮图标（iconfont 类名）
iconPosition	String	'left'	图标位置：'left'、'right'
shape	String	'rect'	按钮形状：'rect'、'square'、'round-rect'、'circle'
loading	Boolean	false	是否显示加载状态
active	Boolean	true	是否启用按下状态
maxWidth	String	'100%'	按钮最大宽度
onClick	Function	-	按钮点击回调函数，优先级高于 buttonClick 事件

事件说明

事件名	说明	参数
buttonClick	按钮点击事件

Slot 说明

Slot 名	说明
left	左侧内容区域

示例

基础用法

<fs-bottom-action-bar
  buttons="{{buttons}}"
  button-layout="left"
  bind:buttonClick="onButtonClick">
  <view slot="left" class="user-info">
    <image class="avatar" src="{{userAvatar}}"></image>
    <view class="info">
      <text class="name">{{userName}}</text>
      <text class="desc">{{userDesc}}</text>
    </view>
  </view>
</fs-bottom-action-bar>

自定义样式

<fs-bottom-action-bar
  buttons="{{buttons}}"
  button-layout="right"
  base-style="padding: 20px; background-color: #f5f5f5;"
  left-style="margin-right: 24px;"
  right-style="padding-left: 16px;"
  bind:buttonClick="onButtonClick">
  <view slot="left">
    <text>自定义样式示例</text>
  </view>
</fs-bottom-action-bar>

使用内置 onClick 回调

data: {
  buttons: [
    {
      text: '立即执行',
      theme: 'primary',
      onClick: (button) => {
        // 内置回调，优先级高于 buttonClick 事件
        wx.showToast({
          title: `执行 ${button.text}`,
          icon: 'success'
        });
      }
    },
    {
      text: '普通按钮',
      theme: 'default'
      // 没有 onClick，会触发 buttonClick 事件
    }
  ]
}

不同布局形态

<!-- 居左布局 -->
<fs-bottom-action-bar buttons="{{buttons}}" button-layout="left">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

<!-- 居右布局 -->
<fs-bottom-action-bar buttons="{{buttons}}" button-layout="right">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

<!-- 居中布局 -->
<fs-bottom-action-bar buttons="{{buttons}}" button-layout="center">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

<!-- 均分布局 -->
<fs-bottom-action-bar buttons="{{buttons}}" button-layout="justify">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

超过 4 个按钮的情况

// 当按钮数量超过 3 个时，第 4 个及后续按钮会收纳到"更多"按钮中
data: {
  buttons: [
    { text: '编辑', theme: 'primary' },
    { text: '删除', theme: 'warn' },
    { text: '分享', theme: 'default' },
    { text: '复制', theme: 'default' }, // 这个及后续按钮会在"更多"中
    { text: '移动', theme: 'default' },
    { text: '重命名', theme: 'default' }
 ]
}

注意：更多按钮的 actionsheet 弹窗没有标题，直接显示操作选项列表。

更多按钮样式

• 默认更多按钮宽高为 40px
• button-layout="justify" 时，普通按钮均分剩余宽度，更多按钮保持固定尺寸
• 传入 more-btn-info 但未指定尺寸/样式字段时，更多按钮仍默认使用 40px

自定义可见按钮个数

通过 visible-count 属性可以控制显示多少个可见按钮，其余按钮会自动收纳到"更多"按钮中。

<!-- 未传 visible-count：超过3个按钮时，默认显示前3个和更多按钮 -->
<fs-bottom-action-bar buttons="{{buttons}}" bind:buttonClick="onButtonClick">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

<!-- visible-count=1：显示第1个按钮和更多按钮 -->
<fs-bottom-action-bar 
  buttons="{{buttons}}" 
  visible-count="{{1}}"
  bind:buttonClick="onButtonClick">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

<!-- visible-count=2：显示前2个按钮和更多按钮 -->
<fs-bottom-action-bar 
  buttons="{{buttons}}" 
  visible-count="{{2}}"
  bind:buttonClick="onButtonClick">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

<!-- visible-count=4：显示前4个按钮和更多按钮 -->
<fs-bottom-action-bar 
  buttons="{{buttons}}" 
  visible-count="{{4}}"
  bind:buttonClick="onButtonClick">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

说明：

• 如果未传 visible-count，默认显示前 3 个按钮，其余按钮收纳到"更多"中
• 如果设置了 visible-count，则显示前N个按钮（N为 visible-count 的值），其余按钮收纳到"更多"中
• 如果按钮总数小于等于 visible-count，则显示所有按钮，不显示"更多"按钮

仅剩一个更多按钮时展开全部

通过 show-all-btn-when-more-only-one 属性可以控制，当按照 visible-count 分组后更多区只剩 1 个按钮时，是否直接展示全部原始按钮。

<fs-bottom-action-bar
  buttons="{{buttons}}"
  visible-count="{{3}}"
  show-all-btn-when-more-only-one="{{true}}"
  bind:buttonClick="onButtonClick">
  <view slot="left">左侧内容</view>
</fs-bottom-action-bar>

说明：

• 当 buttons.length = 4 且 visible-count = 3 时，默认会显示前 3 个按钮和更多按钮
• 当同时设置 show-all-btn-when-more-only-one="{{true}}" 时，会直接展示 4 个原始按钮，不显示"更多"按钮

完整示例

WXML

<fs-bottom-action-bar
  buttons="{{buttons}}"
  button-layout="{{layout}}"
  base-style="{{containerStyle}}"
  bind:buttonClick="onButtonClick">
  <view slot="left" class="user-info">
    <image class="avatar" src="{{user.avatar}}"></image>
    <view class="info">
      <text class="name">{{user.name}}</text>
      <text class="desc">{{user.role}}</text>
    </view>
  </view>
</fs-bottom-action-bar>

JavaScript

Page({
  data: {
    layout: 'left',
    containerStyle: 'padding: 16px 20px;',
    user: {
      name: '张三',
      role: '产品经理',
      avatar: '/images/avatar.png'
    },
    buttons: [
      {
        text: '编辑',
        theme: 'primary',
        variant: 'base',
        icon: 'edit',
        onClick: (button) => {
          // 内置回调优先执行
          wx.showModal({
            title: '编辑',
            content: '是否编辑此项？',
            success: (res) => {
              if (res.confirm) {
                console.log('确认编辑');
              }
            }
          });
        }
      },
      {
        text: '删除',
        theme: 'warn',
        variant: 'outline',
        icon: 'delete'
      },
      {
        text: '分享',
        theme: 'default',
        variant: 'outline',
        icon: 'share'
      },
      {
        text: '复制',
        theme: 'default',
        variant: 'text'
      },
      {
        text: '移动',
        theme: 'default',
        variant: 'text'
      }
    ]
  },

  onButtonClick(e) {
    const { button, index } = e.detail;
    console.log('按钮点击事件:', button.text, index);

    // 根据按钮类型执行不同操作
    switch (button.text) {
      case '删除':
        this.handleDelete();
        break;
      case '分享':
        this.handleShare();
        break;
      default:
        wx.showToast({
          title: `点击了 ${button.text}`,
          icon: 'none'
        });
    }
  },

  handleDelete() {
    wx.showModal({
      title: '确认删除',
      content: '删除后无法恢复，确定要删除吗？',
      confirmColor: '#ff4d4f',
      success: (res) => {
        if (res.confirm) {
          // 执行删除操作
          console.log('执行删除');
        }
      }
    });
  },

  handleShare() {
    wx.showActionSheet({
      itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
      success: (res) => {
        console.log('分享方式:', res.tapIndex);
      }
    });
  }
})

样式说明

组件内置了渐变背景样式：

background: radial-gradient(55.69% 86.43% at 82.36% 8.6%, #FFFFFF 0%, #F4FBFF 63%),
  linear-gradient(90deg, rgba(255, 255, 255, 0) 66.5%, rgba(255, 255, 255, 0.2) 100%);

可以通过 base-style 属性覆盖默认样式。

事件处理优先级

1. 按钮内置 onClick 回调：如果按钮定义了 onClick 函数，优先执行此回调
2. 组件 buttonClick 事件：如果按钮没有 onClick 回调，则触发组件的 buttonClick 事件

注意事项

1. 按钮间距固定为 8px，边距为12px
2. 超过 3 个按钮时，第 4 个及后续按钮会自动收纳到"更多"按钮的 actionsheet 中（可通过 visible-count 自定义可见按钮个数）
3. "更多"按钮默认宽高为 40px；在 justify 布局下普通按钮均分，更多按钮保持固定尺寸
4. 传入 more-btn-info 但未指定尺寸/样式字段时，更多按钮仍默认使用 40px
5. 开启 show-all-btn-when-more-only-one 后，如果更多区只剩 1 个按钮，则直接展示全部原始按钮
6. "更多"按钮使用 titlebar_more_black iconfont 图标
7. "更多"按钮的 actionsheet 弹窗没有标题，直接显示操作选项
8. actionsheet 回调使用 res.idx 而不是 res.index
9. 左侧 slot 内容会自动垂直居中
10. 组件依赖 ava-ui/fxui/fs-button/index 和 ava-ui/fxui/DialogCenter/DialogCenter 组件
11. DialogCenter 组件已内置在组件中，无需在页面中额外添加
12. 组件内置渐变背景，可通过 base-style 自定义
13. 支持按钮级别的 onClick 回调函数，优先级高于组件事件

打开预览