FloatFab 悬浮按钮

预览

01:38



---

组件名：rice-float-fab

可以上下左右拖动的悬浮球，在微信小程序端使用了wxs技术，可以达到流畅的拖动体验。

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础使用

可以通过 default-position 设置球的默认位置

<rice-float-fab default-position="top-left" icon="star-fill" />

限制拖动方向

通过设置 axis 属性可以限制拖动方向，默认不限制

<!-- 只能x轴拖动 -->
<rice-float-fab axis="x" />
<!-- 只能y轴拖动 -->
<rice-float-fab axis="y" />

磁吸

通过设置 adsorption 值可以实现拖动结束后会自动吸附到 x 轴方向最近一边。

<!-- 吸附x轴 -->
<rice-float-fab adsorption="x" />
<!-- 吸附y轴 -->
<rice-float-fab adsorption="y" />

双向绑定

可以通过 v-model 控制小球的位置

<rice-float-fab v-if="show" v-model:offset="offset" bg-color="#e6a23c">
  <text class="fab--text">拖我</text>
</rice-float-fab>
<script setup>
const show = ref(false)
const offset = ref<FloatFabOffset>({
  x: 0,
  y: 0
})

onReady(() => {
  const window = uni.getWindowInfo()
  offset.value.x = window.windowWidth / 2 - 26
  offset.value.y = window.windowHeight / 2 - 26
  show.value = true
})
</script>

API

Props

属性名	类型	说明	默认值
offset	Object(FloatFabOffset)	悬浮球的位置，{x:number,y:number}	{-1,-1}
axis	String	拖动的方向，可选值：x、y、xy	xy
adsorption	String	拖动结束后吸附的方向，默认不吸附，可选值：x、y	-
default-position	String	默认的初始位置，只有第一次加载且offset的x或y的值小于0时才生效，可选值：center、top-left、top-right、bottom-right、bottom-left	bottom-right
gap	String|Number	悬浮球与窗口的最小距离，单位px；	-
gap-top	String|Number	单独设置悬浮按钮与上窗口的最小距离；	-
gap-bottom	String|Number	单独设置悬浮按钮与下窗口的最小距离；	-
gap-left	String|Number	单独设置悬浮按钮与左窗口的最小距离；	-
gap-right	String|Number	单独设置悬浮按钮与右窗口的最小距离；	-
over-gap	Boolean	拖动的时候按钮是否可超出 gap 的距离,拖动结束会自动回弹到正确的位置，默认true	-
duration	Number	吸附时的动画时间 单位ms，默认300	-
icon	String	icon图标	-
icon-color	String	图标颜色	-
icon-size	String|Number	图标大小	-
height	String|Number	悬浮球的高度	60px
width	String|Number	悬浮球的宽度	60px
radius	String|Number	圆角值 ，默认为100%	-
bg-color	String	背景颜色，支持渐变色	-
disabled	Boolean	是否禁止拖动，默认false	-
z-index	Number	z-index 层级，默认99	-
custom-style	String	自定义style样式	-

Events

事件名	说明	回调参数
click	点击小球时触发	-
offsetChange	小球位置改变时触发	(position:FloatFabOffset)

类型定义

type FloatFabOffset = {
	x : number,
	y : number
}

组件导出如下类型

// 组件类型
import {FloatFabOffset} from "@/uni_modules/rice-ui"
const floatFabRef = ref<RiceFloatFabComponentPublicInstance | null>(null)