更新记录

1.0.0（2025-08-19） 下载此版本

上传插件

平台兼容性

uni-app(4.07)

其他

n-float-button 悬浮按钮组件

介绍

n-float-button 是一个可展开的悬浮按钮组件，点击主按钮后会展开一系列自定义按钮，常用于页面快捷操作入口。

基本用法

在页面中引入组件并传入相应的参数：

Props

list 数据项属性

Slots

使用示例

``vue

样式变量
可以通过 CSS 变量自定义组件样式：

变量名 说明  默认值
--btn-bg    主按钮背景色  $uni-color-primary
--item-size 按钮尺寸    由 size 属性决定
--item-width    展开项宽度   自动计算
使用示例
基础用法
```vue
<template>
  <nFloatButtonVue :list="btns" />
</template>

<script>
export default {
  data() {
    return {
      btns: [
        { icon: '/static/icon1.png', id: 1 },
        { icon: '/static/icon2.png', id: 2 },
        { icon: '/static/icon3.png', id: 3 }
      ]
    }
  }
}
</script>

自定义按钮大小

<nFloatButtonVue :list="btns" :size="60" />

使用插槽自定义按钮内容

<nFloatButtonVue :list="btns">
  <template v-slot:btnItem="{data}">
    <text>{{ data.label }}</text>
  </template>
</nFloatButtonVue>