前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目

前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目,阅读全文下载完整代码请关注微信公众号： 前端组件开发

效果图如下:

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>