miniprogram-float-button

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>

1. 在相应的小程序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)
  },
})

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

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

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

1.属性

选项	描述	类型	默认值
bind:toggle	点击modal取消按钮	event	event
mainImg	主按钮的图片	image	无
floatButtonChildData	子按钮数据(请按钮demo上的数据格式填写)	Array	无
right	距离窗口右边的距离(单位:rpx)	Number	100
bottom	距离窗口底部的距离(单位:rpx)	Number	100

2.方法

方法名	参数	描述
open	无	打开button
close	无	关闭button

开发

可以看官方的文档

参考资料

react-motion-menu-button