vue移动端底部菜单tabbar

1.定义路由和底部导航页面

<template><div class="index"><router-view></router-view><tabBar :tabbarList="tabbarList" /><img src="../../assets/img/gzt.png" ></div>
</template><script>
import tabBar from '../../components/tabbar/tabbar.vue'
import gzt from '../../assets/img/gzt.png'
import gzt2 from '../../assets/img/gzt2.png'
import message from '../../assets/img/message.png'
import message2 from '../../assets/img/message2.png'
import my from '../../assets/img/my.png'
import my2 from '../../assets/img/my2.png'
export default {name:"index",components:{tabBar}, data() {return {tabbarList:[{name:"工作台",path:"/home",img:gzt,img2:gzt2},{name:"消息",path:"/message",img:message,img2:message2},{name:"我的",path:"/my",img:my,img2:my2}]}},mounted () {},
}
</script><style></style>

2.底部导航页面

<template><div class="tabbar"><router-link v-for="(item,index) in tabbarList" :key="index" class="tab-item" :to="item.path"active-class="isActive"><div class="item-wrap flex_a"><img :src="isRouter(item.path) ? item.img2 : item.img"><div>{{item.name}}</div></div></router-link></div>
</template><script>export default {name: "tabBar",props: {tabbarList: Array},data() {return {}},methods: {isRouter(str) {let path = this.$route.path;console.log(str, path)return path.includes(str)}},}
</script><style lang="less" scoped>.tabbar {width: 100%;height: 53px;display: flex;justify-content: center;align-items: center;background: #ffffff;position: fixed;width: 100%;bottom: 0;left: 0px;}.isActive {color: #3296FA;}.tab-item {flex: 1;font-size: 12px;height: 100%;}.item-wrap {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}img {width: 24px;height: 24px;margin-bottom: 5px;}a {text-decoration: none;color: #697179;}a,a:hover,a:active,a:visited,a:link,a:focus {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;outline: none;background: none;text-decoration: none;}
</style>

3.配置路由

let router = new Router({routes: [{path: '/',component: () => import('../view/index/index.vue'),children: [{path: '',redirect: '/home'},{path: '/home',name: "home",component: () => import('../view/home/index.vue')},// {//     path: '/store',//     name: "store",//  component: () => import('../views/store.vue')// },// {//  path: '/my',//    name: "my",//     component: () => import('../views/my.vue')// },]},]
})

vue移动端底部菜单tabbar相关推荐

HBuilderX打包web网站之wap2app设置底部菜单tabBar
上面是真实案例,首页.在看.我的就是我设置的菜单,还可以设置图标,填写图片网络地址就行. 下面是代码,可以直接用: 第一步,先下载2个文件或者复制也行,那就新建吧: 分别新建一个css文件,命名为 ...
android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
魔坊APP项目-18-种植园，基于支付宝提供的沙箱测试环境开发支付接口、服务端, 处理支付结果的同步通知和异步通知、修复页面底部菜单无法被点击的BUG
种植园一.基于支付宝提供的沙箱测试环境开发支付接口沙箱环境: https://openhome.alipay.com/platform/appDaily.htm?tab=info 开发文档: ht ...
【微信小程序】之如何创建底部菜单？tabBar、mp-tabbar
方法一:通过app.json配置底部菜单(常用) 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象全局配置 | 微信开放文档微信开发者平台文档htt ...
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
文章目录 0.事件总线复习 1.显隐逻辑 2.Detail.vue和它要控制的tabbar.vue不是父子关系 3.使用中央事件总线来控制 4.效果 0.事件总线复习 2021-10-21 vue笔记 ...
2021-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabbar的显隐,mutation的用法,this.$store.commit()的两个参数
文章目录 0.vuex复习 1.引入 2.在state中存showTabbar后,直接可以引用 3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值 4.效果:实现进入详情页 ...
[vue移动端项目] 严选商城项目使用vue+vant做的移动端商城小项目
文章目录项目准备安装 amfe-flexible 安装第三方插件 postcss-pxtorem 配置vue.config.js reset.css 重置样式表安装less 预编译语言安装v ...
2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目一.Vue项目搭建二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...

vue移动端底部菜单tabbar

1.定义路由和底部导航页面

2.底部导航页面

3.配置路由

vue移动端底部菜单tabbar相关推荐

最新文章

热门文章