uni-fab 悬浮按钮组件使用方法和源码

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	悬浮按钮点击事件

组件示例

点击查看：https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab