miniprogram-float-button v1.0.1

miniprogram-float-button

a fly out button(motion button)

安装组件

npm install --save miniprogram-float-button

用法及demo

1. 在需要用到的wxml页面上添加以下代码

<float-button 
  bind:toggle='toggle' 
  floatButtonChildData='{{floatButtonChildData}}' 
  right="{{120}}" 
  bottom="{{120}}" 
  mainImg="{{mainImg}}"
></float-button>

2. 在相应的小程序js文件添加以下代码

function hello() {
  // eslint-disable-next-line no-console
  console.log('say hello')
}

Page({
  data: {
    floatButtonChildData: [{
      src: './images/frown.png',
      content: '不开心',
      onClick: hello
    },
    {
      src: './images/message.png',
      content: '我的信息',
      // eslint-disable-next-line no-console
      onClick: () => console.log('1')
    },
    {
      src: './images/user.png',
      content: '关于我',
      // eslint-disable-next-line no-console
      onClick: () => console.log('2')
    }
    ],
    mainImg: './images/plus.png',
    isOpen: false,
  },
  toggle(e) {
    // eslint-disable-next-line no-console
    console.log(e.detail)
  },
})

3. 在相应的小程序json文件添加以下代码

  "usingComponents": {
    "float-button": "/path/component"
  }

base-modal 的属性和方法介绍如下：

1.属性

2.方法

开发

可以看官方的文档

参考资料

react-motion-menu-button