前端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>