(相關(guān)資料圖)

前端Vue自定義導(dǎo)航欄菜單 定制左側(cè)導(dǎo)航菜單按鈕 中部logo圖標(biāo) 右側(cè)導(dǎo)航菜單按鈕， 下載完整代碼請(qǐng)?jiān)L問(wèn)uni-app插件市場(chǎng)地址：https://ext.dcloud.net.cn/plugin?id=13152

效果圖如下：

cc-navHeader

使用方法

在page.json設(shè)置{"path": "pages/index/index","style": {"navigationStyle":"custom","app-plus":{"titleNView":false}}}

HTML代碼實(shí)現(xiàn)部分

<script>export default {data() {return {menuArr: [{"id": "1","menu": "手機(jī)","url": "/pages/phone/phone"},{"id": "2","menu": "升學(xué)","url": "/pages/study/study"},{"id": "3","menu": "配件","url": "/pages/parts/parts"},{"id": "4","menu": "生活","url": "/pages/life/life"}],banner: [{"id": 1,"image": "/static/image/banner1.jpg"},{"id": 2,"image": "/static/image/banner2.jpg"},{"id": 3,"image": "/static/image/banner3.jpg"},{"id": 4,"image": "/static/image/banner4.jpg"}]}},mounted() {},methods: {leftClick(item) {uni.showModal({title: "點(diǎn)擊導(dǎo)航欄按鈕",content: "點(diǎn)擊導(dǎo)航欄左側(cè)搜索按鈕 "})},rigClick(flag) {if (flag == 0) {uni.showModal({title: "點(diǎn)擊導(dǎo)航欄按鈕",content: "點(diǎn)擊導(dǎo)航右側(cè)購(gòu)物車按鈕 "})} else {uni.showModal({title: "點(diǎn)擊導(dǎo)航欄按鈕",content: "點(diǎn)擊導(dǎo)航右側(cè)更多按鈕 "})}}}}</script>

關(guān)鍵詞：