1.组件下载地址:https://ext.dcloud.net.cn/plugin?id=144
2.使用方法:
第一步:在插件市场下载或者直接导入到项目中
第二步:直接在页面中template中使用标签
<uni-fab ref="fab"
:content="content"
horizontal="right"
vertical="bottom"
direction="vertical"
:popMenu="false"
@fabClick="fabClick"
@trigger="trigger" />
第三步:在methods中设置点击事件
其中 fabClick() 方法仅在 :popMenu=”false” 时生效,就是不弹出菜单的意思
trigger()方法是在 :popMenu=”true”是弹出菜单的点击事件 popMenu 默认为true
e.index 为每个按钮的索引
大功告成啦!点击下方下载项目使用源码
methods: {
fabClick() {
// 打开新增页面
uni.navigateTo({
url: '/pages/add/add',
fail(e) {
console.log(e)
},
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log('someEvent:'+data.data)
}
},
success(res) {
res.eventChannel.emit('acceptDataFromOpenerPage', {
data: 'test111'
})
}
})
},
trigger(e) {
console.log(e.index)
},
test() {
console.log('test')
}
}
uni-fab组件API
Fab Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
pattern | Object | – | 可选样式配置项 |
horizontal | String | ‘left’ | 水平对齐方式。left :左对齐,right :右对齐 |
vertical | String | ‘bottom’ | 垂直对齐方式。bottom :下对齐,top :上对齐 |
direction | String | ‘horizontal’ | 展开菜单显示方式。horizontal :水平显示,vertical :垂直显示 |
popMenu | Boolean | true | 是否使用弹出菜单 |
content | Array | – | 展开菜单内容配置项 |
pattern配置项:
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
color | String | #3c3e49 | 文字默认颜色 |
selectedColor | String | #007AFF | 文字选中时的颜色 |
backgroundColor | String | #ffffff | 背景色 |
buttonColor | String | #3c3e49 | 按钮背景色 |
content配置项:
参数 | 类型 | 说明 |
---|---|---|
iconPath | String | 图片路径 |
selectedIconPath | String | 选中后图片路径 |
text | String | 文字 |
active | Boolean | 是否选中当前 |
Fab Events
参数 | 类型 | 说明 |
---|---|---|
@trigger | Function | 展开菜单点击事件,返回点击信息 |
@fabClick | Function | 悬浮按钮点击事件 |