/weapp-floating-button

小程序悬浮按钮

Primary LanguageJavaScript

小程序悬浮按钮

悬浮按钮（Floating Action Button，简称 FAB）是 APP 应用中常见的 UI 元件。它轻盈、优雅、便捷又高效，是 Google 设计语言中一颗璀璨的明珠。悬浮按钮往往都会独立出现在界面之上，提升整体的导航，拓展页面的功能，使应用的操作更加便捷。

基于小程序组件 movable-area、movable-view 封装。

查看效果

运行

  • 克隆仓库，导入到微信开发者工具

  • 安装依赖 npm i

  • 开发者工具中的菜单栏：工具 -> 构建 npm

代码示例

<floating-button
  options="{{ options }}"
  bind:select="onSelect"
/>
Page({
  data: {
    options: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
    ]
  },

  onSelect (e) {
    console.log(e.detail)
  }
})

API

Props

参数 说明 类型 默认值
options 可选项数据 array -
openText 触发按钮开启文字描述 string -
closeText 触发按钮关闭文字描述 string -
x 定义 x 轴方向的偏移 number -
y 定义 y 轴方向的偏移 number -
zIndex 元素 z-index number 999

Events

事件名 说明 回调参数
select 点击选项回调 点击项的 value