前端Vue自定义导航栏菜单定制左侧导航菜单按钮中部logo图标右侧导航菜单按钮

2023-06-23 09:13:20 来源：博客园

【资料图】

前端Vue自定义导航栏菜单定制左侧导航菜单按钮中部logo图标右侧导航菜单按钮，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13152

效果图如下：

cc-navHeader

使用方法

在page.json设置{"path": "pages/index/index","style": {"navigationStyle":"custom","app-plus":{"titleNView":false}}}

HTML代码实现部分

<script>export default {data() {return {menuArr: [{"id": "1","menu": "手机","url": "/pages/phone/phone"},{"id": "2","menu": "升学","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: "点击导航栏按钮",content: "点击导航栏左侧搜索按钮 "})},rigClick(flag) {if (flag == 0) {uni.showModal({title: "点击导航栏按钮",content: "点击导航右侧购物车按钮 "})} else {uni.showModal({title: "点击导航栏按钮",content: "点击导航右侧更多按钮 "})}}}}</script>

关键词：

前端Vue自定义导航栏菜单 定制左侧导航菜单按钮 中部logo图标 右侧导航菜单按钮

cc-navHeader

使用方法

HTML代码实现部分

前端Vue自定义导航栏菜单定制左侧导航菜单按钮中部logo图标右侧导航菜单按钮