In our usual practice or actual projects, we often encounter such a demand: the navigation in the mobile terminal is not at the top or at the bottom, but at the bottom and fixed. When we click the navigation item, we will switch to the corresponding component. I believe that for many friends, this is a very simple requirement, and there are many open source component libraries on the market, such as cube UI! So for a friend who is still practicing and doesn't know much about the third-party component library, you might as well take a look at my article. I believe it will be beneficial to you!

First of all, before realizing this requirement, we first analyze or recall which one is similar to the demo we have done. I believe many friends will immediately remember - tab bar switching. Then for the design of html structure, we can use the tab bar switching structure: a large box is covered with two small boxes, one for container and the other for navigation!

html} structure

<div>
    <div>container</div>
    <div class="footer">
      <div class="module-nav">
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>home page</h3>
        </div>
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>find</h3>
        </div>
        <div class="nav-i">
          <div class="iconfont icon-add"></div>
        </div>
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>news</h3>
        </div>
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>my</h3>
        <div>
      </div>
    </div>
  </div>

After the HTML structure is written, we can easily think of position: fixed when we dress the upper skeleton and "fix the bottom" according to the requirements. Of course, I also use fixed positioning here, but the layout adopts flex. When flex is combined with fixed positioning layout, there are often many unnecessary problems, such as the failure of flex attribute and the conflict between the two effects, The reasons are mostly caused by "off label". Most of them appear in the parent element flex and the child element position. At this time, a div can be added in the middle to get rid of the connection between the two.  

css} style (style)

.footer
  position fixed
  bottom 0
  z-index 999
  max-width 1080px
  width 100%
  border-top 1px solid #C0C0C0
  .module-nav
    display flex
    justify-content space-around
    .nav-i
      width 60px
      text-align center
      .icon
        font-size 35px
        padding 5px 0
      .icon-add
        font-size 60px
      h3
        font-size 15px
        font-weight normal
        margin 0
        padding-bottom 5px

After the skeleton and clothes are made, the prototype will come out, and half of our needs will be realized. The rest is component switching. This is simple. You only need to configure the routing table and specify the jump

Guangzhou VI design companyhttps://www.houdianzi.com

Routing table:

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/find",
      name: "find",
      component: Find
    },
    {
      path: "/info",
      name: "info",
      component: Info
    },
    {
      path: "/user",
      name: "user",
      component: User
    }
  ]

Finally, add router view in the "container". You can see the complete code below:

// HTML
<div>
    <div class="main-content">
      <router-view></router-view>
    </div>
    <div class="footer">
      <div class="module-nav">
        <router-link tag="div" to="/" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>home page</h3>
        </router-link>
        <router-link tag="div" to="/find" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>find</h3>
        </router-link>
        <div class="nav-i">
          <div class="iconfont icon-add"></div>
        </div>
        <router-link tag="div" to="/info" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>news</h3>
        </router-link>
        <router-link tag="div" to="/user" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>my</h3>
        </router-link>
      </div>
    </div>
  </div>

// css
.footer
  position fixed
  bottom 0
  z-index 999
  max-width 1080px
  width 100%
  border-top 1px solid #C0C0C0
  .module-nav
    display flex
    justify-content space-around
    .nav-i
      width 60px
      text-align center
      .icon
        font-size 35px
        padding 5px 0
      .icon-add
        font-size 60px
      h3
        font-size 15px
        font-weight normal
        margin 0
        padding-bottom 5px

// router
export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/find",
      name: "find",
      component: Find
    },
    {
      path: "/info",
      name: "info",
      component: Info
    },
    {
      path: "/user",
      name: "user",
      component: User
    }
  ]
});

If you can't do small things well, why do big things? Stick to it!