前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目,下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13321

效果图如下:

cc-suspensionMenu

使用方法

<!-- scrollShow:是否显示滑动到顶悬浮按钮  color：悬浮按钮背景色  iconList：悬浮菜单弹出数组  @click：点击事件-->
<cc-suspensionMenu :scrollShow="scrollShow" colors="#fa436a" :iconList="iconList"
@click="menuClick"></cc-suspensionMenu>

HTML代码实现部分

<template>
<view class="content">
<!-- scrollShow:是否显示滑动到顶悬浮按钮  color：悬浮按钮背景色  iconList：悬浮菜单弹出数组  @click：点击事件-->
<cc-suspensionMenu :scrollShow="scrollShow" colors="#fa436a" :iconList="iconList"
@click="menuClick"></cc-suspensionMenu>
</view>
</template>
<script>
export default {
data() {
return {
colors: '#fa436a',
scrollShow: false, //是否显示悬浮菜单
iconList: [{
name: '搜索',
icon: require('../../static/search.png'),
},
{
name: '客服',
icon: require('../../static/serve.png'),
}
]
}
},
methods: {
menuClick: function(item) {
console.log("点击悬浮按钮条目item = " + JSON.stringify(item.name));
uni.showModal({
title: '点击悬浮按钮条目',
content: "点击悬浮按钮条目item = " + JSON.stringify(item.name)
})
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
}
</style>