Vue-cli3 移动端底部导航实现思路

实现思路
1.vue项目页面入口为App.vue文件(所有页面都将映射到该文件的<router-view/>中)
2.初始化进入的页面为router.js文件中path: '/'所对应的页面(例如如下的Home.vue文件为初始页面)

routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue'),
      meta: {
        title: '首页'
      }
    }
]

底部导航实现(此处全局使用了Vant.js组件库)

<template>
  <div class="main-wrapper">
    <keep-alive>
      <component :is="currentPage"></component>
    </keep-alive>

    <van-tabbar v-model="currentTab">
      <van-tabbar-item v-for="item in tabList" :key="item.label" :icon="item.icon">{{item.label}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'

export default {
  name: 'Main',
  data() {
    return {
      currentTab: 0,
      tabList: [
        {
          icon: 'wap-home-o',
          label: '首页',
          component: () => import('./Home')
        },
        {
          icon: 'contact',
          label: '我的',
          component: () => import('./Profile')
        }
      ]
    }
  },
  computed: {
    currentPage() {
      return this.tabList[this.currentTab].component
    }
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  }
}
</script>

<style lang="stylus">
.main-wrapper
  padding-bottom 50px
  .van-tabbar-item__icon
    font-size 22px
  .van-tabbar-item__text
    font-size 12px
</style>

发布了35 篇原创文章 · 获赞 43 · 访问量 14万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章