首頁
上一章我們已經(jīng)完成了登錄功能附井，根據(jù)上一章的設(shè)計(jì)，登錄完成之后两残，將進(jìn)入首頁永毅，我們看一下首頁的原型圖：
再次強(qiáng)調(diào)，這個(gè)項(xiàng)目并不是正規(guī)的開發(fā)流程人弓，可以說的難聽些沼死，就是想到哪做到哪，隨便蔓延崔赌。
總體布局
經(jīng)過原型圖意蛀，我們可以分析出首頁的大概結(jié)構(gòu)：
- 頭部是一個(gè)包含三個(gè)item的tab,用于控制內(nèi)容區(qū)域顯示不同的組件
- 足部是疑似導(dǎo)航效果的三個(gè)按鈕，分別對(duì)應(yīng)開啟新記錄健芭，開啟新的圖片記錄县钥，以及當(dāng)前月的記錄數(shù)目。
剩下的就是內(nèi)容主題部分慈迈。
暫時(shí)只考慮日記這個(gè)tab節(jié)點(diǎn)的內(nèi)容部分若贮。它是一個(gè)月份列表內(nèi)嵌套了一個(gè)本月的日記的列表，所以需要一個(gè)月份字段痒留，并且由于日記是分組的谴麦，當(dāng)前顯示的組也需要記錄，同時(shí)伸头，還要知道頁面內(nèi)正在顯示的月是哪一個(gè)月匾效，也就是，在頁面右下角記錄條目要知道根據(jù)那個(gè)月份和組來進(jìn)行計(jì)算恤磷。
然后看記錄的框框內(nèi)都有什么內(nèi)容：
首先面哼，是記錄時(shí)間，包括星期扫步，日期魔策，時(shí)間，但這些可以用一個(gè)date對(duì)象代表锌妻，然后日記的標(biāo)題代乃，日記內(nèi)容旬牲，發(fā)送日記時(shí)候的心情仿粹，天氣搁吓，以及是否打了標(biāo)記，這些為了前后端方便吭历，均用int型來表示堕仔。
所以最終經(jīng)過分析最終的數(shù)據(jù)模型設(shè)計(jì)如下：
indexTodos:[
{
month:0, //月份
default:1, //正在顯示的月份
todos:[{
createTime:new Date(), //記錄時(shí)間
item:'', //標(biāo)題
content:'', //內(nèi)容
weather:0, //天氣
mood:0, //心情
bookmark:0, //標(biāo)記
groupid:0, //所屬組
}]
}
]
接下來我們完成首頁，首先在Views文件夾內(nèi)創(chuàng)建Index.vue文件晌区，然后安裝登錄頁一樣摩骨，完成一個(gè)基本的Vue文件的結(jié)構(gòu)：
Index.vue:
<style scoped>
</style>
<template>
<div id="main">
<!--白云背景圖-->
<img src="../assets/bg.png" class="background">
</div>
</template>
<script>
export default {
}
</script>
接下來按照剛剛的分析，將其分為頭--內(nèi)容--足三層結(jié)構(gòu)：
<div id="main">
<img src="../assets/bg.png" class="background">
<div class="head">
</div>
<div id="contentPanel">
</div>
<div class="foot">
</div>
</div>
接下來朗若，由于內(nèi)容部分需要?jiǎng)討B(tài)切換恼五，所以我們先給他加上動(dòng)畫效果，在考慮其他：
<div id="main">
<img src="../assets/bg.png" class="background">
<div class="head">
</div>
<div id="contentPanel">
<transition name="custom-classes-transition"
enter-active-class="animated bounceInLeft"
leave-active-class="animated fadeOut"
:duration="{ enter: 700, leave: 200 }">
</transition>
</div>
<div class="foot">
</div>
</div>
頭部
接下來頭部比較簡單哭懈，直接先duang的一些放入MuseUI的控件：
<div class="head">
<mu-tabs class="tabtitle" :value="indexTab" lineClass="lineClass" v-on:change="tabChange">
<mu-tab value="tab1" :class="tab1Class" class="left-tab" title="日記" />
<mu-tab value="tab2" :class="tab2Class" title="日歷" />
<mu-tab value="tab3" :class="tab3Class" class="right-tab" title="記錄" />
</mu-tabs>
</div>
你可能已經(jīng)注意到了灾馒，這里面多了好多class，還有一個(gè)change的事件遣总，其中class是因?yàn)樗哪J(rèn)樣式與我們需要的不符睬罗，所以需要對(duì)組件進(jìn)行一些修改，再次對(duì)不懂less感到懺悔旭斥，這是class的代碼：
.tabtitle{
background: #fff;
padding-right: 30px;
padding-left: 30px;
}
.tabtitle .tab{
color: #5e35b1;
border: 2px solid #5e35b1;
border-width: 2px 0px;
padding: 2px;
margin-top: 20px;
margin-bottom: 20px;
min-height: 30px;
font-weight: bold;
}
.tabtitle .tab-active{
color: #fff;
background: #5e35b1;
border: 2px solid #5e35b1;
border-width: 2px 0px;
padding: 2px;
margin-top: 20px;
margin-bottom: 20px;
min-height: 30px;
font-weight: bold;
}
.tabtitle .left-tab{
border-radius: 10px 0px 0px 10px;
border: 2px solid #5e35b1;
margin:0px;
margin-left: 5px;
}
.tabtitle .right-tab{
border-radius: 0px 10px 10px 0px;
border: 2px solid #5e35b1;
margin-right: 5px;
}
.lineClass{
display: none;
}
注意tab項(xiàng)的左右樣式不一致容达。
然后是change事件，根據(jù)文檔可知垂券，change的事件會(huì)帶一個(gè)參數(shù)花盐，參數(shù)值為tab項(xiàng)的值：
methods: {
tabChange:function(event){
//模擬hover偽類
this.indexTab = event
for (var i = 1;i<=3;i++){
this['tab' + i + 'Class'] = 'tab'
}
this[event + 'Class'] = 'tab-active'
switch (event) {
case 'tab1':
//記錄操作
break
case 'tab2':
//日歷操作
break
case 'tab3':
//我的操作
break
}
}
}
同樣在節(jié)點(diǎn)內(nèi)有多個(gè)值都是綁定的，比如class的類名菇爪，以及tabitem默認(rèn)值的指向等卒暂，綁定的值同樣定義在script內(nèi)，具體綁定值如下：
data () {
return {
indexTab:"tab1",
tab1Class:"tab-active",
tab2Class:"tab",
tab3Class:"tab",
}
},
足部
完成頭部之后娄帖，接下來就開始弄足部也祠，足部也很簡單，同樣使用MuseUIDD組件近速，這次我們使用Bottom Navigation,當(dāng)然同樣需要修改css和添加不同的事件诈嘿，足部暫時(shí)的代碼如下：
<div class="foot">
<mu-bottom-nav class="bottom-nav" shift v-on:change="navChange">
<mu-bottom-nav-item value="edit" title="" class="navItemClass" iconClass="iconclass" activeClass="iconclass" icon="edit"/>
<mu-bottom-nav-item value="photo" title="" class="navItemClass" style="width:34%" iconClass="iconclass" activeClass="iconclass" icon="local_see"/>
<div class="navItemClass" >{{ itemnumber }}篇日記</div>
</mu-bottom-nav>
</div>
首先看到的應(yīng)該就是第三個(gè)item，并沒有使用mu-bottom-nav-item而是使用了一個(gè)普通的div削葱，并綁定了一個(gè)itemnumber奖亚，將itemnumber添加到data內(nèi)后的代碼：
data () {
return {
itemnumber:1,
indexTab:"tab1",
tab1Class:"tab-active",
tab2Class:"tab",
tab3Class:"tab",
}
},
然后，是對(duì)mu-bottom-nav樣式的修改析砸，這個(gè)因?yàn)槎际庆o態(tài)的昔字，比起頭部來說就簡單多了：
.bottomNav{
position: absolute;
bottom: 0px;
background: #fff;
color: #757575;
}
.navItemClass{
width:33%;
}
.iconclass{
color: #757575;
}
然后就是這個(gè)組件的change事件，由于這個(gè)組件沒有設(shè)置默認(rèn)值，所以只要點(diǎn)擊即觸發(fā)change事件：
navChange:function(event){
if(event=='edit'){
//新建日記
}else if(event=='photo'){
//拍照
}
},
當(dāng)前效果
經(jīng)過書寫后作郭，當(dāng)前的效果如下：
目前來看陨囊，基本符合電影截圖中的樣式，然后就是最最重要的內(nèi)容頁了夹攒，下一章將繼續(xù)完善.
謝謝觀看
