配置組件
- 在src目錄下面新建一個components文件夾集中管理組件
- 新建tabbar文件夾蝗肪，在下面新建HomeContainer.vue悼院，MemberContainer.vue，ShopcarContainer.vue半开，SearchContainer.vue四個組件混滔，并在router.js中引入，以及設(shè)置匹配規(guī)則
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
import ShopcarContainer from './components/tabbar/ShopcarContainer.vue'
import SearchContainer from './components/tabbar/SearchContainer.vue'
//導(dǎo)入對應(yīng)的路由組件
routes:[
{path:'/home',component:HomeContainer},
{path:'/member',component:MemberContainer},
{path:'/shopcar',component:ShopcarContainer},
{path:'/search',component:SearchContainer}
],
制作輪播圖
- 在HomeContainer.vue中征冷，使用mui提供的樣式择膝，制作出一個簡略的輪播圖
<mt-swipe :auto="4000">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item>
</mt-swipe>
- 設(shè)置輪播圖的高度，因?yàn)樗哪J(rèn)高度為0检激，此時不能看到任何效果肴捉，設(shè)置高度后才可以看到
.mint-swipe{
height: 200px;
}
- 設(shè)置第一張輪播圖的背景顏色，以此類推
.mint-swipe-item:nth-child(1){
background-color: aqua;
}
- 安裝vue-resource
npm i vue-resource -S
- 導(dǎo)入安裝vue-resource,這樣才能使用vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)
- 使用vue-resource發(fā)起跨域請求叔收，此時能夠獲取圖片的url
getLunbotu(){//獲取輪播圖數(shù)據(jù)
this.$http.get('https://api.douban.com/v2/movie/coming_soon').then(result=>{
if (result.body.status===0){
this.lunbotulist=result.body.message;
}
else {
}
})
}
- 保存輪播圖數(shù)組齿穗，可以通過這個數(shù)組插入多張圖片
data(){
return{
lunbotulist:[]
}
},
- 使用生命周期函數(shù)調(diào)用
created(){
this.getLunbotu()
},
- 使用v-for將請求的圖片放入輪播圖中,這樣就能完成一個完整的輪播圖
<mt-swipe-item v-for="item in lunbotulist" :key="item.url">
<img src="item.img"/>
</mt-swipe-item>
添加九宮格
- 引用mui提供的九宮格樣式，刪除不需要的三個饺律，使它變成符合預(yù)期上下各三個圖標(biāo)的樣式
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li>
</ul>
- 修改背景顏色窃页，使之與整體背景顏色一致
.mui-grid-view.mui-grid-9{
background-color: white;
border: 0px;
}
3.去除li標(biāo)簽的邊框
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
border: 0;
}
- 修改每個span的class屬性值，使圖標(biāo)與文字相匹配（由于沒有圖標(biāo)素材复濒，只好在mui中選擇適合的圖標(biāo)樣式了）
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">新聞資訊</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-image"></span>
<div class="mui-media-body">圖片分享</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-plus"></span>
<div class="mui-media-body">商品購買</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">留言反饋</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-videocam"></span>
<div class="mui-media-body">視頻專區(qū)</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">聯(lián)系我們</div></a></li>
5.路由重定向脖卖，使進(jìn)入界面為主頁
{path:'/',redirect:'/home'},
- 添加路由切換動畫，左邊組件消失多少右邊組件就會加載多少巧颈，使切換組件更加美觀
.app-container{
padding-top: 40px;
overflow-x: hidden;
}
.v-enter{
opacity: 0;
transform: translateX(100%);
position: absolute;
}
.v-leave-to{
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
