前端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 >
<!-- 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556592.html
標籤：其他
上一篇：前端Vue自定義精美上下滾動通告欄組件 常用于展示公告資訊 上下滾動跑馬燈 上下滾動廣播
下一篇：返回列表