底部Tab

页面的底部Tab是非常重要的部分， 哪个页面都会用到。

下面就是使用的步骤

1. 在首页中引用底部Tab

  1. <template>
  2.   <div class="background">
  3.     <div class="home">
  4.       <div class="m_layout">
  5.         <!-- 轮播图-->
  6.         <HomeBannerView></HomeBannerView>
  7.       </div>
  8.     </div>
  9.     <!-- 这里就是底部Tab -->
  10.     <NavBottomView :is_shops_index="is_shops_index"></NavBottomView>
  11.   </div>
  12. </template>
  13. <script>
  14.     // 这里就是底部Tab对应的vue文件
  15.     import NavBottomView from '../../components/NavBottom.vue';
  16. </script>

2. 增加对应的component文件

增加 /components/NavBottom.vue ：

  1. <template>
  2.   <div class="footer">
  3.       <footer class="fixBottomBox">
  4.         <ul>
  5.             <router-link tag="li" to="/" class="tabItem">
  6.               <a href="javascript:;" class="tab-item-link" v-if="is_shops_index">
  7.                 <img src="../assets/footer01.png" alt="" class="tabbar-logo">
  8.                 <p class="tabbar-text" style="color: rgba(234, 49, 6, 0.66);">首页</p>
  9.               </a>
  10.               <a href="javascript:;" class="tab-item-link" else>
  11.                 <img src="../assets/footer001.png" alt="" class="tabbar-logo">
  12.                 <p class="tabbar-text">首页</p>
  13.               </a>
  14.             </router-link>
  15.             <router-link tag="li" to="/shops/category" class="tabItem">
  16.                 <a href="javascript:;" class="tab-item-link" v-if="is_category">
  17.                     <img src="../assets/footer02.png" alt="" class="tabbar-logo">
  18.                     <p class="tabbar-text" style="color: rgba(234, 49, 6, 0.66);">分类</p>
  19.                 </a>
  20.                 <a href="javascript:;" class="tab-item-link" else>
  21.                   <img src="../assets/footer002.png" alt="" class="tabbar-logo">
  22.                   <p class="tabbar-text">分类</p>
  23.                 </a>
  24.             </router-link>
  25.             <router-link tag="li" to="/cart" class="tabItem">
  26.                 <a href="javascript:;" class="tab-item-link" v-if="is_cart">
  27.                   <img src="../assets/footer03.png" alt="" class="tabbar-logo">
  28.                   <p class="tabbar-text" style="color: rgba(234, 49, 6, 0.66);">购物车</p>
  29.                 </a>
  30.                 <a href="javascript:;" class="tab-item-link" else>
  31.                   <img src="../assets/footer003.png" alt="" class="tabbar-logo">
  32.                   <p class="tabbar-text">购物车</p>
  33.                 </a>
  34.             </router-link>
  35.             <router-link tag="li" to="/mine" class="tabItem">
  36.                 <a href="javascript:;" class="tab-item-link" v-if="is_mine">
  37.                   <img src="../assets/footer04.png" alt="" class="tabbar-logo">
  38.                   <p class="tabbar-text" style="color: rgba(234, 49, 6, 0.66);">我的</p>
  39.                 </a>
  40.                 <a href="javascript:;" class="tab-item-link" else>
  41.                   <img src="../assets/footer004.png" alt="" class="tabbar-logo">
  42.                   <p class="tabbar-text">我的</p>
  43.                 </a>
  44.             </router-link>
  45.         </ul>
  46.     </footer>
  47.   </div>
  48. </template>
  50. <script>
  51. export default{
  52.   data () {
  53.     return {
  54.     }
  55.   },
  56.   props: {
  57.     is_shops_index: Boolean,
  58.     is_category: Boolean,
  59.     is_cart: Boolean,
  60.     is_mine: Boolean,
  61.   },
  62.   mounted () {
  63.   },
  64.   computed: {
  65.   },
  66.   methods: {
  67.   }
  68. }
  69. </script>

效果图

效果如下图所示：

底部Tab

总结

底部Tab 很简单，又很重要。

在本节中，我们使用了一个component来实现它，然后在所有用到它的页面来使用。 是一个非常典型的重用过程。