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

属性名类型默认值说明
patternObject可选样式配置项
horizontalString‘left’水平对齐方式。left:左对齐,right:右对齐
verticalString‘bottom’垂直对齐方式。bottom:下对齐,top:上对齐
directionString‘horizontal’展开菜单显示方式。horizontal:水平显示,vertical:垂直显示
popMenuBooleantrue是否使用弹出菜单
contentArray展开菜单内容配置项

pattern配置项:

参数类型默认值说明
colorString#3c3e49文字默认颜色
selectedColorString#007AFF文字选中时的颜色
backgroundColorString#ffffff背景色
buttonColorString#3c3e49按钮背景色

content配置项:

参数类型说明
iconPathString图片路径
selectedIconPathString选中后图片路径
textString文字
activeBoolean是否选中当前

Fab Events

参数类型说明
@triggerFunction展开菜单点击事件,返回点击信息
@fabClickFunction悬浮按钮点击事件

组件示例

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注