前端Vue自定义导航栏菜单 定制左侧导航菜单按钮 中部logo图标 右侧导航菜单按钮, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13152文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
效果图如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
# cc-navHeader文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
#### 使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
```使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
在page.json设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"path": "pages/index/index",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"style": {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"navigationStyle":"custom",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"app-plus":{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"titleNView":false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<!-- menuArr:导航菜单栏 @leftClick: 左导航按钮事件点击 @rigClick: 右导航按钮事件点击-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<cc-navHeader :menuArr="menuArr" @leftClick="leftClick" @rigClick="rigClick"></cc-navHeader>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
```文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
#### HTML代码实现部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
```html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<template>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<view class="content">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<!-- menuArr:导航菜单栏 @leftClick: 左导航按钮事件点击 @rigClick: 右导航按钮事件点击-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<cc-navHeader :menuArr="menuArr" @leftClick="leftClick" @rigClick="rigClick"></cc-navHeader>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<!-- 自定义轮播图 swiperArr: 轮播数组 -->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<cc-mySwiper :swiperArr="banner"></cc-mySwiper>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
</view>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
</template>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
export default {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
data() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
return {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
menuArr: [{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": "1",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"menu": "手机",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"url": "/pages/phone/phone"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": "2",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"menu": "升学",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"url": "/pages/study/study"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": "3",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"menu": "配件",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"url": "/pages/parts/parts"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": "4",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"menu": "生活",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"url": "/pages/life/life"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
],文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
banner: [{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": 1,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"image": "/static/image/banner1.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": 2,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"image": "/static/image/banner2.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": 3,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"image": "/static/image/banner3.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"id": 4,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
"image": "/static/image/banner4.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
mounted() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
methods: {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
leftClick(item) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
title: '点击导航栏按钮',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
content: '点击导航栏左侧搜索按钮 '文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
rigClick(flag) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
if (flag == 0) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
title: '点击导航栏按钮',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
content: '点击导航右侧购物车按钮 '文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
} else {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
title: '点击导航栏按钮',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
content: '点击导航右侧更多按钮 '文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
<style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
page {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
background-color: #f7f7f7;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
.content {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
display: flex;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
flex-direction: column;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html
</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49411.html