Vue - 基于vant的APP框架(navbar+tabbar+router)

demo 地址: https://github.com/iotjin/jh-vue-demo的app1项目

demo 地址: https://github.com/iotjin/jh-vue-demo的app2项目(带登录、推荐这个)

本篇主要介绍如何使用vant的navbar、tabbar和vue-router 创建一个vue版的APP基础框架(适配刘海屏)

app的主界面一般由三部分构成：navbar + 主体内容 + tabbar，如下图：

所以需要创建navbar组件和tabbar组件，然后通过router-view映射组件，连通单个页面

1、首先要有Vue项目

• Vue - Mac安装vue-cli4.x 并创建模板项目

2、vant安装

• Vue - vant安装(引用babel-plugin-import实现自动按需引入组件)

3、navbar组件实现

导航条一般由左侧item、中间的标题、右侧item组成，当页面跳转后左侧一般是个返回按钮，点击返回上一页面。左右item变动较大，所以需要设置slot，另外主页面一般就4、5个，所以设置左侧默认为返回按钮

3.1、对外暴露的属性 props

  props: {
   
   
    // 是否显示返回按钮，默认为true，优先级低于slot
    isBack: {
   
    type: [Boolean, String], default: true },
    // 默认返回按钮颜色
    backIconColor: {
   
    type: String, default: "white" },
    // 标题
    title: {
   
    type: String, default: "" },
    // 固定在顶部时，是否在标签位置生成一个等高的占位元素
    isPlaceholder: {
   
    type: Boolean, default: false },
  },

3.2、template

 <template>
  <div class="navBar">
    <van-nav-bar
      :title="title"
      fixed
      safe-area-inset-top
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template v-if="$slots.left" slot="left">
        <slot name="left"></slot>
      </template>
      <template v-else-if="isBack" slot="left">
        <van-icon name="arrow-left" size="18" :color="backIconColor" />
      </template>
      <template slot="right">
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
    <div class="nav-top-placeholder" v-if="isPlaceholder"></div>
  </div>
</template>

3.3、背景色、标题颜色和顶部占位

<style>
.van-nav-bar {
   
   
  background: white;
  background: #38bc9d;
}

.van-nav-bar__title {
   
   
  color: black;
  color: white;
}

.nav-top-placeholder {
   
   
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  height: 44px;
}
</style></