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

 

　

 

 

2、輪播圖

輪播圖的做法比較簡單，

　　（1）直接用mint-ui 到官網找到swiper,

 

 

　　（2）在首頁（home組件創建好后），發送axios請求，拿到接口里面 的圖片，

 //在組件被創建好之后，請求輪播圖圖片
created(){
            //api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d
            this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
            .then(res=>{
                console.log(res.data.result);
                this.imgslist= res.data.result.data
            })
            .catch(err=>{
                console.log('輪播圖異常',err);
            })
        }

 

　　（3）然后進行圖片渲染

　　

 <!--這是輪播圖-->
         <mt-swipe :auto='4000' class='swiper' style="height: 200px;background-color: red;">
           <mt-swipe-item v-for="(item, index) in filterImgs" :key="index">
            <img :src="item.thumbnail_pic_s">
           </mt-swipe-item>
         </mt-swipe>

　　（4）有時候我們並不會將請求到的所有數據渲染完，這里可以在computed函數監聽

  computed:{
           filterImgs: function(){   //上面渲染時就用這個filterImgs
            //只返回數組從0-3的數據
           return this.imgslist.slice(0,2);
          }
       },

 

3、九宮格

　　（1）html代碼

 <!--這是九宮格-->
         <div class="list">
             <ul >
                 <li v-for="(grid, index) in grids">
                    <!--這里是點擊時要跳轉的路由-->
                     <router-link :to="grid.router">
                         <img :src="grid.src">
                         <p>{{grid.title}}</p>
                     </router-link>
                     <router-view></router-view>
                 </li>
             </ul>
         </div>

　　（2）將九宮格里面的圖片信息，路由信息存放在一個數組中

var grids = [
        {id:1, src:'../../../static/img/news.png',title:'新聞資訊', router:{name:'news.list'}},
        {id:2, src:'../../../static/img/news.png',title:'圖文分享',router:{name:'news.list'}},
        {id:3, src:'../../../static/img/news.png',title:'商品展示',router:{name:'news.list'}},
        {id:4, src:'../../../static/img/news.png',title:'資訊',router:{name:'news.list'}},
        {id:5, src:'../../../static/img/news.png',title:'聯系我們',router:{name:'news.list'}},
        {id:6, src:'../../../static/img/news.png',title:'新聞資訊',router:{name:'news.list'}},

    ]
    export default {
        name:'Home',
        data(){
            return {
                imgslist:[],
                grids

            }
        }
}

　　（3）九宮格樣式

.list{
    width: 100%;
    height: 100%;
}

.list ul{/*他里面的li在必要時拆航*/
    display: flex;
    flex-wrap: wrap;
}

.list ul li{
    width: 33%;
    height: 100px;
    text-align: center;
    font-size: 12px;
    margin-top: 15px;
}

.list ul li a{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.list ul li a img{
    width: 50px;
}

 

 

 

 

 

 

 

三、總結                                                                                  

1.當滑動頁面的時候，會拽着底部導航滑動如下

 

 

2.解決上面的問題加全局樣式：

html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    padding-top: 41px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

 

3.這是有多久沒有寫項目了：：

https://www.jianshu.com/p/1ee1c410dc67

---恢復內容結束---