# BottomBar 底部按钮栏
固定在底部的容器，用来放置与用户交互交频繁的组件。
提示
组件只提供固定底部容器，内容自行通过slot传入
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 示例
# 基本用法（使用flex布局固定底部）
<view class="pi-scroll-container">
<pi-navbar title="底部按钮栏" />
<scroll-view class="pi-scroll" scroll-y>
<pi-list>
<pi-card v-for="item in 99" :key="item" :title="item + '. 标题'">{{ item }}</pi-card>
</pi-list>
</scroll-view>
<pi-bottom-bar>
<pi-button type="primary" width="100%">确认</pi-button>
</pi-bottom-bar>
</view>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 底部双按钮
提示
style="width: 50%;" 是为了兼容小程序写法
<pi-bottom-bar border-top="none" custom-class="pi-align-center">
<pi-button type="secondary" style="width: 50%;" width="100%" class="pi-mg-right-24">
忽略
</pi-button>
<pi-button type="primary" style="width: 50%;" width="100%">确认</pi-button>
</pi-bottom-bar>
1
2
3
4
5
6
2
3
4
5
6
# 底部三按钮
<pi-bottom-bar border-top="none" custom-class="pi-align-center">
<pi-button type="secondary" style="width: 50%;" width="100%" class="pi-mg-right-24">
忽略
</pi-button>
<pi-button type="warn" style="width: 50%;" width="100%" class="pi-mg-right-24">
销毁
</pi-button>
<pi-button type="primary" style="width: 50%;" width="100%">确认</pi-button>
</pi-bottom-bar>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# API
# Bottom Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| customStyle | 自定义样式，对象形式 | Object | false | {} |
| customClass | 自定义样式类，字符串形式（''） | String | false | '' |
| padding | 内边距 | String | Number | false | '17rpx 32rpx' |
| borderTop | 顶部边框样式，如需去掉，设置'none' | String | false | '1px solid #e6e6e6' |
| safeArea | 开启安全区域 | Boolean | false | false |
| background | 背景颜色 | String | false | '#ffffff' |
| safeAreaBgColor | 安全区域背景颜色 | String | false | '#ffffff' |
| height | 建议传值，不传的时候，自动根据内容撑开 | String | Number | false | '' |
| fixed | 是否fixed定位（当使用页面滚动时候，需要设置为t） | Boolean | false | false |
# Bottom Slots
| 名称 | 描述 | 插槽内容 |
|---|---|---|
| default | 默认插槽 | - |