vue底部导航栏点击切换样式_移动端底部 tab 切换组件的分析以及编写

最新推荐文章于 2024-04-23 13:10:28 发布

weixin_39647773

最新推荐文章于 2024-04-23 13:10:28 发布

阅读量1k

点赞数

文章标签： vue底部导航栏点击切换样式

本文探讨了如何实现移动端Vue底部导航栏的点击切换样式，通过分析组件设计和样式布局，揭示了在开发过程中遇到的路由嵌套问题，并提供了router.js配置和组件逻辑。文章展示了使用flex布局、图标样式和图片的灵活性，以及最终实现的效果。

摘要由CSDN通过智能技术生成

今天看了一下移动端的 tab 切换组件，虽然现在很多组件 ui 库，已经有成熟的这种 tab 切换组件，但是我们还是自己写了一个，接下来我们先来，设计图吧，这个组件不是我写的，感觉这样写有点不太妥当，也不知道后面会出现什么样的问题需要处理，等会看看我以前写的一个组件吧

进入分析阶段

有四个 tab，上面是图片下面对应这相应的文字，一看到这种情况，肯定是 flex 布局最合适了，上下布局，display: flex; justify-content: center; flex-start: columns,但是接下来，你会看到好像没有用到 flex 布局方式，嗯，这里面肯定会有坑

样式布局如下：

.bottom-menu-wrap {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 49px;
  box-sizing: border-box;
  padding: 5px 9px;
  background: #fff;

  ul.menu-group {
    display: block;
    width: 100%;
    height: 100%;

    li.menu-li {
      display: inline-block;
      width: 15%;
      height: 100%;
      margin: 0 5%;

      p {
        width: 100%;
        font-size: $font-size-11;
        font-weight: $font-weight-700;
        font-family: $font-family;
        text-align: center;
      }

      span {
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto;
      }

      //消息图片
      .menu-img-message {
        @include themify() {
          background: themed('menu-message-no-select');
          background-size: 100%;
        } 
      }
      
      //通讯录图片
      .menu-img-address {
        @include themify() {
          background: themed('menu-address-no-select');
          background-size: 100%;
        } 
      }

      //通讯录图片
      .menu-img-work {
        @include themify() {
          background: themed('menu-work-no-select');
          background-size: 100%;
        } 
      }

      //通讯录图片
      .menu-img-self {
        @include themify() {
          background: themed('menu-self-no-select');
          background-size: 100%;
        } 
      }
    }

    li.menu-select {
      //消息图片
      .menu-img-message {
        @include themify() {
          background: themed('menu-message-select');
          background-size: 100%;
        } 
      }
      
      //通讯录图片
      .menu-img-address {
        @include themify() {
          background: themed('menu-address-select');
          background-size: 100%;
        } 
      }

      //通讯录图片
      .menu-img-work {
        @include themify() {
          background: themed('menu-work-select');
          background-size: 100%;