step9 個(gè)人中心布局##
- 前面step1到step8已經(jīng)將首頁(yè)和基本菜單欄完成堪藐，現(xiàn)在先做個(gè)人中心頁(yè)也就是底部菜單中‘我’這個(gè)tab*
- 首頁(yè)點(diǎn)擊去看詳情和寫新動(dòng)態(tài)加到列表中放到后面再完成
- 總體預(yù)覽
Paste_Image.png
- 之前做過(guò)一個(gè)HeaderTab的組件，現(xiàn)在可以拿來(lái)用了
Paste_Image.png
- 如果你遇到底部切換頁(yè)面可以正常顯示挑围，但是直接刷新瀏覽器卻不起作用礁竞，那么你看看是不是沒(méi)有$init()
- 第二部分是圖片，sui中1rem等于20px
- 第三部分是個(gè)人信息杉辙，為了模擬以后從后臺(tái)獲取數(shù)據(jù)模捂，將這部分抽離出來(lái)定義一個(gè)UserDetail組件并將數(shù)據(jù)存儲(chǔ)在一個(gè)數(shù)據(jù)中，這個(gè)數(shù)組存放在me.vue中
Paste_Image.png
- 子父之間的通信：雖然之前也有提到過(guò)蜘矢，但是之前都是在父組件上傳遞一個(gè)字符串狂男，當(dāng)時(shí)的栗子是這樣的
Paste_Image.png
- 然后在子組件的props中注冊(cè)status就可以直接用了，但是今天要傳遞的是一個(gè)數(shù)組data 如果直接寫成data="userData" vue是不能識(shí)別你這個(gè)是字符串還是變量數(shù)組的
- 所以這里要用v-bind:user-data='userData'品腹，這里還有一個(gè)坑岖食，如果你寫的是v-bind:userData='userData'就會(huì)報(bào)錯(cuò)了。
Paste_Image.png
Paste_Image.png
-
組件中的樣式我定義的比較隨便舞吭，直接用標(biāo)簽來(lái)定義樣式泡垃，因?yàn)檫@里加了scope只作用在當(dāng)前組件，vue會(huì)自動(dòng)處理加一串標(biāo)記數(shù)字羡鸥，這樣再也不用為命名擔(dān)心了
Paste_Image.png
Paste_Image.png
- 第三部分的tab與第二部分類似蔑穴，也是抽離一個(gè)組件，這里定義數(shù)組將內(nèi)容與結(jié)構(gòu)分離惧浴，用v-for循環(huán)輸出結(jié)構(gòu)存和，如果要改內(nèi)容直接改數(shù)組，不用在一大堆的html結(jié)構(gòu)里面去找文字了
//這里之所以數(shù)組套數(shù)組是因?yàn)榭紤]到sui的.row樣式結(jié)構(gòu)需要
//path就是路由的路徑了，都要添加到router.js文件中
lists :[
[{
title:'動(dòng)態(tài)',
icon:'icon-app',
path:'/me/moment'
},
{
title:'訪客',
icon:'icon-friends',
path:'/me/friends'
}],
[{
title:'文章',
icon:'icon-menu',
path:'/me/articles'
},
{
title:'最佳實(shí)現(xiàn)',
icon:'icon-browser',
path:'/me/practice'
}],
[{
title:'閱讀',
icon:'icon-code',
path:'/me/read'
},
{
title:'收藏列表',
icon:'icon-star',
path:'/me/love'
}]
]
<user-refer v-bind:lists='lists'>
</user-refer>
<div v-for="list in lists" class="row">
<div class="col-50">
<a class="tab-item" v-link="{ path: list[0].path}">
<!-- 這里不同于首頁(yè)的tab標(biāo)簽切換捐腿，所以不需要replace這個(gè)參數(shù)纵朋，讓路由可以后退 -->
<span class="icon" v-bind:class="list[0].icon"></span><br>
<span class="tab-label">{{list[0].title}}</span>
</a>
</div>
<div class="col-50">
<a class="tab-item" v-link="{ path: list[1].path}">
<span class="icon" v-bind:class="list[1].icon"></span><br>
<span class="tab-label">{{list[1].title}}</span>
</a>
</div>
</div>
</div>
- 第三部分的tab鍵點(diǎn)擊進(jìn)去的詳情還是用路由實(shí)現(xiàn)，下面這一部分可以用組件封裝叙量，路由不用加replace=true參數(shù)倡蝙，第三部分是有滾動(dòng)條的，用法可參考sui官網(wǎng)的滾動(dòng)條http://m.sui.taobao.org/components/#scroller
Paste_Image.png
- 返回按鈕鏈接個(gè)人中心的路由绞佩，詳細(xì)內(nèi)容無(wú)非就是下拉列表寺鸥，大致跟首頁(yè)一樣，可以看step1-step8
Paste_Image.png
Paste_Image.png
https://github.com/sally2015/vue-project
- 同步最新代碼品山，如果你覺(jué)得有幫助胆建，不求打賞只求github給個(gè)小星星，拜托拜托
