vue如何实现自定义底部菜单栏
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
最近vue不是特别火,自己想写一个vue 的底部菜单栏,然后试着开始写,起来还是听痛苦的,但是还是写出来,这个过程重查询了一些资料和看了一些视频。
1 写好界面
这是我写好的四个界面
2 在router.js重定义路由
在一级路由下面定义自己tabbr的子路由。
routes: [ { path: '/', name: 'index', component:()=>import('./views/index'), //懒加载引入,路由 children:[ {path:'',redirect:'/charts'},//重定项 {path:'/charts',name:'charts',component:()=>import('./views/charts.vue')}, {path:'/adiscover',name:'adiscover',component:()=>import('./views/adiscover.vue')}, {path:'/ybutton',ybutton:'ybutton',component:()=>import('./views/ybutton.vue')}, {path:'/me',name:'me',component:()=>import('./views/me.vue')} ] }, ]
3 封装tabbar底部菜单栏 组件
<template> <!-- <div class="footbar"> <router-link to='/' tag='div'> <span> <img :src="/UploadFiles/2021-04-02/charts'">4 显示底部菜单栏的界面 引入tabbar 组件
<template> <div class="index"> 主页 <router-view></router-view> <tabbar :data="tabbarData"/> </div> </template> <script> import tabbar from '../components/tabbaer' export default { name:'index', data() { return { tabbarData:[ {title:'微信',icon:true,path:'/charts'}, {title:'通讯录',icon:false,path:'/adiscover'}, {title:'发现',icon:false,path:'/ybutton'}, {title:'我的',icon:false,path:'/me'}, ] } }, components:{ tabbar, }, } </script> <style scoped> .index{ width:100%; height:100%; overflow: hidden; padding:16px; box-sizing:border-box; } </style>5 这就是最终结果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:微信小程序如何利用getCurrentPages进行页面传值