Vue开发精要之底部导航栏

Vue开发精要之底部导航栏

在我们日常开发中，尤其是移动端开发（H5、微信公众号、企业微信等）中，我们往往需要自己设计底部导航栏。或许，导航栏这种常见功能，大家都是司空见惯的，但是其中设计的知识点却是不少，本片文档将要介绍地步导航栏涉及的知识点与常用方法，共同学习，共同进步。

一、导航切换

• HTML

  <!-- 占位容器 -->
  <div class="placegolder-container"></div>
  <!-- 底部导航栏 -->
  <div class="bottom-tabs">
    <div class="tabs-item" v-for="(item, index) in tabsList" :key="index" @click="tabsChange(index)">
      <img class="tab-icon" :src="tabIndex==index?item.srcS:item.src">
      <p class="tab-text" :class="tabIndex==index?'active':''">{{item.text}}</p>
    </div>
  </div>
  

• CSS

   .placegolder-container {
      height: 70px;
    }
  
    .bottom-tabs {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 5;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0px -1px 1px #e6e6e6;
      background-color: #fff;
  
      .tabs-item {
        padding: 5px 0;
        flex: 1;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
  
        .tab-icon {
          width: 30px;
          height: 30px;
          border-radius: 4px;
        }
  
        .tab-text {
          font-size: 14px;
  
          &.active {
            color: blue;
          }
        }
      }
    }
  

• JS

  export default {
    name: "app",
    components: {},
    created() {
      this.tabIndex = localStorage.getItem("tabIndex");
      console.log(this.tabIndex, "222222222222222");
    },
    data() {
      return {
        tabIndex: 0,
        tabsList: [
          {
            src: require("../src/assets/images/2.png"),
            srcS: require("../src/assets/images/1.png"),
            text: "首页",
            path: "/booking"
          },
          {
            src: require("../src/assets/images/2.png"),
            srcS: require("../src/assets/images/1.png"),
            text: "查询",
            path: "/query"
          },
          {
            src: require("../src/assets/images/2.png"),
            srcS: require("../src/assets/images/1.png"),
            text: "信息",
            path: "/info"
          },
          {
            src: require("../src/assets/images/2.png"),
            srcS: require("../src/assets/images/1.png"),
            text: "我的",
            path: "/mine"
          }
        ]
      };
    },
    methods: {
      tabsChange(index) {
        this.tabIndex = index;
        this.$router.push({
          path: this.tabsList[index].path
        });
        console.log(this.tabsList[index].path);
        localStorage.setItem("tabIndex", this.tabIndex);
      }
    },
    watch: {
      $route(newVal, oldVal) {
        console.log(newVal, oldVal);
        if (newVal.meta.index) {
          this.tabIndex = newVal.meta.index;
          localStorage.setItem("tabIndex", this.tabIndex);
        }
      }
    }
  };
  </script>
  

• 注意：

  1. 页面设置占位容器是为了抵消底部导航栏固定定位的高度。
  2. tabIndex 标记当前选中的路由。
  3. tabsChange(index) 底部导航栏路由切换。
  4. watch 监听路由变化，保持路由选中的驻留（选中/激活）样式。

二、缓存使用

• 为什么要使用缓存？缓存哪些内容？
• 答：使用缓存是为了保存选中路由的 tabIndex ，在刷新页面的时候，依然可以保持（选中/激活）状态。

三、路由配置与监听

（1）配置

• router.js

  	{
        path: '/booking',
        name: 'booking',
        meta: { index: 0, title: '首页' },
        component: () => import ('../src/pages/booking/booking.vue')
  	},
      {
        path: '/query',
        name: 'query',
        meta: { index: 1, title: '查询' },
        component: () => import ('../src/pages/query/query.vue')
      },
  

• 在配置路由的时候，我们可以添加meta.title 与 meta.index属性，用于与选中路由的 tabIndex

（2）监听

• 注意：使用监听的目的是为了在使用浏览器前进后退的时候，保持路由选中的驻留（选中/激活）样式。代码见 CSS

四、动态修改页面标题

• 在修改页面标题 title 的时候，我们配置路由的 title 属性来控制。

  // 根据路由设置标题
  router.beforeEach((to, from, next) => {
      console.log({ to, from })
       /*路由发生改变修改页面的title */
      if (to.meta.title) {
          document.title = to.meta.title
      }
      next();
  })
  

• 另外，在涉及详情相关的页面的时候，我们往往需要使用详情中的某一属性来设置标题，这个时候我们可以通过，在页面的 created 中使用方法修改。具体如下：

    created() {
      document.title = this.currentRoomInfo.name;
    },
  

五、效果图

六、感悟

在实际开发中，如果我们作为开发者，很多时候我们应该从用户、测试、运维的角度多多考虑，这个我们的代码慢慢就会变得完美，至少逻辑上没有什么错误，这样自己才能慢慢进步……

最后

以上就是风中银耳汤为你收集整理的Vue开发精要之底部导航栏的全部内容，希望文章能够帮你解决Vue开发精要之底部导航栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。