Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）

---恢复内容开始---

一、前言                                                                                 

                       1、底部导航（两种做法）

                                        2、轮播图

                                        3、九宫格

 

二、主要内容                                                                           

1、底部导航

 　　方式一：借用mint-ui, 这里实现tab切换时高亮可以给每个tab双向绑定一个值

         （1）html结构代码如下

 <!--底部-->
    <mt-tabbar v-model="selected" fixed>
    <mt-tab-item id="home">
      <img slot="icon" src="./assets/index.png">
      首页
    </mt-tab-item>
    <mt-tab-item id="vip">
      <img slot="icon" src="./assets/vip.png">
      会员
    </mt-tab-item>
    <mt-tab-item id="shopcart">
      <img slot="icon" src="./assets/shopcart.png">
      购物车
    </mt-tab-item>
    <mt-tab-item id="search">
      <img slot="icon" src="./assets/search.png">
      查找
    </mt-tab-item>
  </mt-tabbar>

　　（2）实现点击时切换，并且当前的背景为高亮

         mint-ui官方说了tabBar有value属性值，就是id值，

export default {
  name: 'App',
  data(){
    return {
      selected:''

    }
  },

 watch:{
  selected:function(newV,oldV){
    
    console.log(newV);
    console.log(oldV);
    console.log(this.selected);// 官方文档已经说明了，tabbar 有 value属性是 选中的项的id值，点击的时候会给selected进行赋值，也就将id值赋给selected，根据selected的值为点击的那个添加一个is-selected样式，你可以更改这个样式，或者绑定一个点击事件判断selected的值，添加样式，原理是一样的
    this.$router.push({name:this.selected});//这里进行路由跳转，跳到当前点击这里

  }
 }
}

 

 

　　方式二：vue-router中给我们提供了linkactiveclass，用这种方式可以自定义导航

　　（1）html结构代码

   <!--底部-->
    <div class="tabBar">
      <ul>
        <li v-for="(tab, index) in tabs">
          <router-link :to="tab.routerName">
            <img :src="tab.imgSrc">
            <p>{{tab.title}}</p>
          </router-link>
        </li>
      </ul>
      
    </div>

　　（2）将tab用到的图片定义到下面的data中

 import index from './assets/index.png'
  import vip from './assets/vip.png'
  import shopcart from './assets/shopcart.png'
  import search from './assets/search.png'

  let tabs = [
    {id:1, title:"首页", imgSrc:index, routerName:{name:'home'}},
    {id:2, title:"会员", imgSrc:vip, routerName:{name:'vip'}},
    {id:3, title:"购物车", imgSrc:shopcart, routerName:{name:'cart'}},
    {id:4, title:"查找", imgSrc:search, routerName:{name:'search'}}


  ]
export default {
  name: 'App',
  data(){
    return {
     
      tabs

    }
  },

　　（3）自己定义tab样式

.tabBar{
  width: 100%;
  height: 55px;
  background-color: #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
   background-size: 100% 1px;
  background-repeat: no-repeat;/*做一像素渐变线*/
  background-position: top left;
  background-color: #fafafa;
}

.tabBar ul{
  width: 100%;
  overflow: hidden;
}

.tabBar ul li{
  float: left;
  width: 25%;
  height: 55px;
  text-align: center;
}

.tabBar ul li a{
  display: inline-block;
  width: 100%;
  height: 100%;
 padding-top: 10px;

}
.tabBar ul li a.link-active{
  background-color: pink;
}
.tabBar ul li a img{
  width: 25px;
  height: 25px;
}
.tabBar ul li a p{
  font-size: 12px;
}

tabBar.css