Vue开发精要之底部导航栏

亦凉 2021-08-02 22:48 475阅读 0赞

### 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;
          },

--------------------

#### 五、效果图 ####

![底部导航栏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]

--------------------

#### 六、感悟 ####

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/862cb41bd49148de885d5eca605c8197.png