更新记录
1.0.0(2025-01-21)
下载此版本
1.0.0版本发布,只支持uniappx项目
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.41 app-uvue |
× |
4.41 |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
rice-floatBall 浮动气泡
可拖动的浮动气泡、悬浮按钮,支持自主吸附 x 轴或者 y 轴,可设置 自由移动、x 轴移动或者 y 轴移动,目前只支持 uniappx 项目的 app、h5、微信小程序。
目前只支持 uniappx项目!!!
props
参数 |
说明 |
类型 |
默认值 |
offset |
气泡的位置,数组格式,第一个值是x轴的位置,第二个值是y轴的位置;其中:[-1,-1]就是右下角、[-2,-2] 就是左下角、[-3,-3]就是左上角、[-4,-4]就是右上角 |
number[] |
[-1,-1] 右下角 |
axis |
可拖拽的方向,xy就是可以自由拖拽 |
'x'|'y'|'xy' |
xy |
adsorption |
拖拽结束后吸附的方向 |
'x'|'y' |
- |
disabled |
是否禁止拖拽 |
boolean |
false |
gap |
气泡与窗口的最小间距 |
number |
24 |
overGap |
拖拽的时候气泡是否可以超出gap的距离 |
boolean |
true |
width |
气泡的宽度,单位rpx |
string |
120 |
height |
气泡的高度,单位rpx |
string |
120 |
round |
气泡圆角值,单位rpx |
string |
默认圆角 |
bgColor |
气泡背景颜色 |
string |
#1989fa |
duration |
动画时间 |
number |
400 |
customStyle |
自定义style样式 |
string |
- |
Events
事件名 |
说明 |
回调参数 |
offsetChange |
位置改变时触发 |
[x,y] |
click |
点击时触发 |
- |
slots
代码示例
组件无需导入,模版中直接使用即可
<template>
//右上角显示
<rice-floatBall :offset="[-3,-3]">
<template #default>右上角</template>
</rice-floatBall>
//拖动结束后吸附在x轴
<rice-floatBall :offset="offset2" adsorption="x">
<template #default>吸附x轴</template>
</rice-floatBall>
//events事件
<rice-floatBall :offset="offset" :gap="50" customStyle="border:1px solid red;" @offsetChange="offsetChange" @click="handleClick"> </rice-floatBall>
</template>
<script setup>
const offset = ref<number[]>([100, 200])
const offset2 = ref<number[]>([24, 88])
function offsetChange(arr : number[]) {
offset.value = arr
}
function handleClick(){
console.log("click")
}
</script>