低代码高性能原生UI框架Floatbutton
组件类型：UxFloatbuttonComponentPublicInstance
支持四角定位，自动靠边吸咐，支持阻尼效果，支持按钮展开
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | Array | 右下角 | 位置值 |
| pos | String | rb | 默认位置 |
| adsorb | Boolean | true | 自动吸附 |
| offset | Any | 15 | 距边偏移 |
| offsetX | Any | 0 | X轴偏移优先级高于offset |
| offsetY | Any | 0 | Y轴偏移优先级高于offset |
| duration | Number | 600 | 过渡时间 |
| width | Any | 50 | 宽度 |
| height | Any | 50 | 高度 |
| radius | Any | 25 | 圆角 |
| background | String | #fff | 背景色 |
| backgroundDark | String | #333 | 深色none-不显示，auto-自动适配深色模式，其他-颜色 |
| shadow | Boolean | true | 显示阴影 |
| disabled | Boolean | false | 禁止滑动 |
pos
| 值 | 说明 |
|---|---|
| rt右上 | |
| rc右中 | |
| rb右下 | |
| lt左上 | |
| lc左中 | |
| lb左下 | |
| ct中上 | |
| c中心 | |
| cb中下 |
backgroundDark
| 值 | 说明 |
|---|---|
| none不显示 | |
| auto自动适配深色模式 | |
| color其他颜色 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-card direction="column" icon="flag-filled" title="悬浮按钮" :bold="true">
<ux-text text="支持四角定位，自动靠边吸咐，支持阻尼效果，支持按钮展开"></ux-text>
</ux-card>
<ux-floatbutton pos="rt">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="rc" :disabled="true">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="rb">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="lt">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="lc" :width="20" :height="50" :offset="0" :radius="4">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="lb">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="ct">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="c">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="cb" background="#00a000" background-dark="#00a900">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-page>
</template><template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-card direction="column" icon="flag-filled" title="悬浮按钮" :bold="true">
<ux-text text="支持四角定位，自动靠边吸咐，支持阻尼效果，支持按钮展开"></ux-text>
</ux-card>
<ux-floatbutton pos="rt">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="rc" :disabled="true">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="rb">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="lt">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="lc" :width="20" :height="50" :offset="0" :radius="4">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="lb">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="ct">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="c">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-floatbutton pos="cb" background="#00a000" background-dark="#00a900">
<ux-icon type="plus" :size="18"></ux-icon>
</ux-floatbutton>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-page>
</template>ts
<script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/floatbutton.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/floatbutton.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>