timg.jpg

首頁(yè)

上一章我們已經(jīng)完成了登錄功能，根據(jù)上一章的設(shè)計(jì)，登錄完成之后，將進(jìn)入首頁(yè)，我們看一下首頁(yè)的原型圖：

再次強(qiáng)調(diào)，這個(gè)項(xiàng)目并不是正規(guī)的開(kāi)發(fā)流程，可以說(shuō)的難聽(tīng)些，就是想到哪做到哪，隨便蔓延。

1.png

總體布局

經(jīng)過(guò)原型圖，我們可以分析出首頁(yè)的大概結(jié)構(gòu)：

1. 頭部是一個(gè)包含三個(gè)item的tab,用于控制內(nèi)容區(qū)域顯示不同的組件
2. 足部是疑似導(dǎo)航效果的三個(gè)按鈕，分別對(duì)應(yīng)開(kāi)啟新記錄，開(kāi)啟新的圖片記錄，以及當(dāng)前月的記錄數(shù)目。

剩下的就是內(nèi)容主題部分。

暫時(shí)只考慮日記這個(gè)tab節(jié)點(diǎn)的內(nèi)容部分。它是一個(gè)月份列表內(nèi)嵌套了一個(gè)本月的日記的列表，所以需要一個(gè)月份字段，并且由于日記是分組的，當(dāng)前顯示的組也需要記錄，同時(shí)，還要知道頁(yè)面內(nèi)正在顯示的月是哪一個(gè)月，也就是，在頁(yè)面右下角記錄條目要知道根據(jù)那個(gè)月份和組來(lái)進(jìn)行計(jì)算。

然后看記錄的框框內(nèi)都有什么內(nèi)容：

首先，是記錄時(shí)間，包括星期，日期，時(shí)間，但這些可以用一個(gè)date對(duì)象代表，然后日記的標(biāo)題，日記內(nèi)容，發(fā)送日記時(shí)候的心情，天氣，以及是否打了標(biāo)記，這些為了前后端方便，均用int型來(lái)表示。

所以最終經(jīng)過(guò)分析最終的數(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,               //所屬組
        }]
    }
]

接下來(lái)我們完成首頁(yè)，首先在Views文件夾內(nèi)創(chuàng)建Index.vue文件，然后安裝登錄頁(yè)一樣，完成一個(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>

接下來(lái)按照剛剛的分析，將其分為頭--內(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>

接下來(lái)，由于內(nèi)容部分需要?jiǎng)討B(tài)切換，所以我們先給他加上動(dòng)畫(huà)效果，在考慮其他：

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

頭部

接下來(lái)頭部比較簡(jiǎn)單，直接先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偽類(lèi)
        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的類(lèi)名，以及tabitem默認(rèn)值的指向等，綁定的值同樣定義在script內(nèi)，具體綁定值如下：

data () {
    return {
        indexTab:"tab1",
        tab1Class:"tab-active",
        tab2Class:"tab",
        tab3Class:"tab",
    }
},

足部

完成頭部之后，接下來(lái)就開(kāi)始弄足部，足部也很簡(jiǎn)單，同樣使用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，并沒(méi)有使用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)的，比起頭部來(lái)說(shuō)就簡(jiǎn)單多了：

.bottomNav{
    position: absolute;
    bottom: 0px;
    background: #fff;
    color: #757575;
}
.navItemClass{
    width:33%;
}
.iconclass{
    color: #757575;
}

然后就是這個(gè)組件的change事件，由于這個(gè)組件沒(méi)有設(shè)置默認(rèn)值，所以只要點(diǎn)擊即觸發(fā)change事件：

navChange:function(event){
    if(event=='edit'){
        //新建日記
    }else if(event=='photo'){
        //拍照
    }
},

當(dāng)前效果

經(jīng)過(guò)書(shū)寫(xiě)后，當(dāng)前的效果如下：

2.png

目前來(lái)看，基本符合電影截圖中的樣式，然后就是最最重要的內(nèi)容頁(yè)了，下一章將繼續(xù)完善.

謝謝觀看