vant tabbar底部导航的使用

新建home.js

<template><div id="home"><div class="tabbar_content"><router-view></router-view></div><!-- vant 标签栏 --><van-tabbarrouteactive-color="#0f5de5"inactive-color="#444"><van-tabbar-itemv-for="(item, index) in tabbar_items":key="index":class="['iconfont', item.iconClass]"replace:to="item.src">{{item.title}}</van-tabbar-item></van-tabbar></div>
</template>
<script>
export default {name: "home",data() {return {active: 0,// tabIndex: 0,// tabbar_items: [//   { title: "首页", iconClass: "iconshouye", src: "/index" },//   { title: "快报", iconClass: "iconicon-test", src: "/scholar" },//   { title: "检索", iconClass: "iconsousuo1", src: "/search" },//   { title: "我的", iconClass: "iconwode", src: "/mine" },// ],tabbar_items: [{ title: this.$t('tabbar.home'), iconClass: "iconshouye", src: "/index" },{ title: this.$t('tabbar.scholar'), iconClass: "iconicon-test", src: "/scholar" },{ title: this.$t('tabbar.search'), iconClass: "iconsousuo1", src: "/search" },{ title: this.$t('tabbar.mine'), iconClass: "iconwode", src: "/mine" },],};},methods: {},
};
</script>
<style lang="less" scoped>
#home {.tabbar_content {padding-bottom: 56px;}.van-tabbar {box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);}.van-tabbar-item {border-right: 1px solid #eeeeee;font-size: 13px;}.van-tabbar-item:last-child {border: none;}}
</style>
<!-- home -->
<template><div id="home"><div class="tabbar_content"><router-view></router-view></div><!-- vant 标签栏 --><van-tabbarrouteactive-color="#0f5de5"inactive-color="#444"><van-tabbar-itemv-for="(item, index) in tabbar_items":key="index":class="['iconfont', item.iconClass]"replace:to="item.src">{{item.title}}</van-tabbar-item></van-tabbar></div>
</template>
<script>
export default {name: "home",data() {return {active: 0,// tabIndex: 0,// tabbar_items: [//   { title: "首页", iconClass: "iconshouye", src: "/index" },//   { title: "快报", iconClass: "iconicon-test", src: "/scholar" },//   { title: "检索", iconClass: "iconsousuo1", src: "/search" },//   { title: "我的", iconClass: "iconwode", src: "/mine" },// ],tabbar_items: [{ title: this.$t('tabbar.home'), iconClass: "iconshouye", src: "/index" },{ title: this.$t('tabbar.scholar'), iconClass: "iconicon-test", src: "/scholar" },{ title: this.$t('tabbar.search'), iconClass: "iconsousuo1", src: "/search" },{ title: this.$t('tabbar.mine'), iconClass: "iconwode", src: "/mine" },],};},methods: {},
};
</script>
<style lang="less" scoped>
#home {.tabbar_content {padding-bottom: 56px;}.van-tabbar {box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);}.van-tabbar-item {border-right: 1px solid #eeeeee;font-size: 13px;}.van-tabbar-item:last-child {border: none;}}
</style>再router.js写入import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const routes = [{path: '/',redirect: '/index',},{path: '/home',component: () => import("@/views/home"),name: 'home',meta: { title: '首页' },children:[{path: "/index",name: "index",component: () => import("@/views/tabbar/index"),meta: { title: "首页" }},{path: "/scholar",name: "scholar",component: () => import("@/views/tabbar/scholar"),meta: { title: "快报" }},{path: "/search",name: "search",component: () => import("@/views/tabbar/search"),meta: { title: "检索" }},{path: "/mine",name: "mine",component: () => import("@/views/tabbar/mine"),meta: { title: "我的" }}]},{path: "/setting",name: "setting",component: () => import("@/views/mine/setting"),meta: { title: "设置" }}
]export default new Router({mode: 'history',// 访问路径不带井号routes: routes,// base: __dirname,// linkActiveClass: 'link-active',scrollBehavior (to, from, savedPosition) {// 控制跳到下一页面回到顶端if (savedPosition) {// 浏览器前进后退触发记录位置return savedPosition} else {return { x: 0, y: 0 }}}
})

vant tabbar底部导航的使用相关推荐

flutter TabBar 底部导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
uView（Tabbar 底部导航栏）
(一)第一种方式 1,每个菜单页面都要 "首页" "发布" "我的" 每个页面都要 <template><view> ...
Vue - tabbar(底部导航栏)
文章目录一.TabBar实现思路二.assets文件夹 2.1 在App.vue里面动态引用css文件三.基本搭建四.TabBar和TabBarItem组件封装 4.1 TabBar组件封装 ...
微信小程序把玩(三)tabBar底部导航
为什么80%的码农都做不了架构师?>>> tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多 ...
vant框架底部导航栏固定滑动抖动解决
#ffoot{ height:120px; position:fixed; bottom:0px; transform: translateZ(0); -webkit-transform: trans ...
小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
vue.js项目实战运用篇之抖音视频APP-第三节：底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
App 底部导航中间加号
App 底部导航中间加号 1. [页面生命周期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2 ...
vant 底部导航栏中间凸起
vant 底部导航栏中间凸起 1.tabBar代码 <template><div><van-tabbar fixed route v-model="activ ...

vant tabbar底部导航的使用

vant tabbar底部导航的使用相关推荐

最新文章

热门文章