快应用底部导航栏

代码如下：

<template>
  <div class="wrapper">
    <!-- tab导航 -->
    <div class="fix-bar">
      <!-- 首页 -->
      <div class="bar index" @click="tabClick('Index')">
        <image
          class="img"
          src="/assets/img/shouye{{numIndex}}.png"
          style="object-fit: contain"
        ></image>
        <text class="text-index">首页</text>
      </div>
      <!-- 咨讯 -->
      <div class="bar setting" @click="tabClick('News')">
        <image
          class="img"
          src="/assets/img/news{{numNews}}.png"
          style="object-fit: contain"
        ></image>
        <text class="text-index">资讯</text>
      </div>
      <!-- 我的 -->
      <div class="bar setting" @click="tabClick('Mine')">
        <image
          class="img"
          src="/assets/img/wode{{numMine}}.png"
          style="object-fit: contain"
        ></image>
        <text class="text-index">我的</text>
      </div>

    </div>
  </div>
</template>

<script>
import router from '@system.router'

export default {
  data: {
    numIndex: 1,
    numNews: 0,
    numMine: 0,
  },
  onInit() {
    let pageName = this.$page.currentPageName || this.$page.name
    if (pageName === "pages/Index") {
      this.numIndex = 1
      this.numMine = 0
      this.numNews = 0
    } else if (pageName === "pages/News") {
      this.numIndex = 0
      this.numMine = 0
      this.numNews = 1
    } else if (pageName === "pages/Mine" || pageName === "pages/Setting" || pageName === "pages/Login") {
      this.numIndex = 0
      this.numMine = 1
      this.numNews = 0
    }
  },
  tabClick(type) {
    router.replace({
      uri: "pages/" + type
    })
  }
}
</script>

<style lang="less">

.wrapper {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  flex-direction: column; /*纵向排列 */
  background: linear-gradient(
    to right,
    rgb(156, 203, 241) 500px,
    rgb(254, 255, 255) 99%
  );
  .fix-bar {
    height: 100px;
    position: fixed;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    .bar {
      width: 33%;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .img {
      width: 32px;
      height: 32px;
    }
    .text-index {
      color: rgba(54, 54, 54, 1);
      font-size: 20px;
    }
  }
}
</style>