a fly out button(motion button)
npm install --save miniprogram-float-button
- 在需要用到的wxml页面上添加以下代码
<float-button
bind:toggle='toggle'
floatButtonChildData='{{floatButtonChildData}}'
right="{{120}}"
bottom="{{120}}"
mainImg="{{mainImg}}"
></float-button>
- 在相应的小程序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)
},
})
- 在相应的小程序json文件添加以下代码
"usingComponents": {
"float-button": "/path/component"
}
选项 |
描述 |
类型 |
默认值 |
bind:toggle |
点击modal取消按钮 |
event |
event |
mainImg |
主按钮的图片 |
image |
无 |
floatButtonChildData |
子按钮数据(请按钮demo上的数据格式填写) |
Array |
无 |
right |
距离窗口右边的距离(单位:rpx) |
Number |
100 |
bottom |
距离窗口底部的距离(单位:rpx) |
Number |
100 |
方法名 |
参数 |
描述 |
open |
无 |
打开button |
close |
无 |
关闭button |
可以看官方的文档
react-motion-menu-button