若是你想開發一個應用(1-16)

首頁

上一章咱們已經完成了登陸功能，根據上一章的設計，登陸完成以後，將進入首頁，咱們看一下首頁的原型圖：

再次強調，這個項目並非正規的開發流程，能夠說的難聽些，就是想到哪作到哪，隨便蔓延。

整體佈局

通過原型圖，咱們能夠分析出首頁的大概結構：

1. 頭部是一個包含三個item的tab,用於控制內容區域顯示不一樣的組件
2. 足部是疑似導航效果的三個按鈕，分別對應開啓新記錄，開啓新的圖片記錄，以及當前月的記錄數目。

剩下的就是內容主題部分。

暫時只考慮日記這個tab節點的內容部分。它是一個月份列表內嵌套了一個本月的日記的列表，因此須要一個月份字段，而且因爲日記是分組的，當前顯示的組也須要記錄，同時，還要知道頁面內正在顯示的月是哪個月，也就是，在頁面右下角記錄條目要知道根據那個月份和組來進行計算。

而後看記錄的框框內都有什麼內容：

首先，是記錄時間，包括星期，日期，時間，但這些能夠用一個date對象表明，而後日記的標題，日記內容，發送日記時候的心情，天氣，以及是否打了標記，這些爲了先後端方便，均用int型來表示。

因此最終通過分析最終的數據模型設計以下：

indexTodos:[
    {
        month:0,              //月份
        default:1,            //正在顯示的月份
        todos:[{
            createTime:new Date(),   //記錄時間
            item:'',                 //標題
            content:'',              //內容
            weather:0,               //天氣
            mood:0,                  //心情
            bookmark:0,              //標記
            groupid:0,               //所屬組
        }]
    }
]

接下來咱們完成首頁，首先在Views文件夾內建立Index.vue文件，而後安裝登陸頁同樣，完成一個基本的Vue文件的結構：

Index.vue:

<style scoped>
</style>
<template>
    <div id="main">
        <!--白雲背景圖-->
        <img src="../assets/bg.png" class="background">
    </div>
</template>
<script>
    export default {
    }
</script>

接下來按照剛剛的分析，將其分爲頭--內容--足三層結構：

<div id="main">
    <img src="../assets/bg.png" class="background">
    <div class="head">
    </div>
    <div id="contentPanel">
    </div>
    <div class="foot">
    </div>
</div>

接下來，因爲內容部分須要動態切換，因此咱們先給他加上動畫效果，在考慮其餘：

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

你可能已經注意到了，這裏面多了好多class，還有一個change的事件，其中class是由於他的默認樣式與咱們須要的不符，因此須要對組件進行一些修改，再次對不懂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項的左右樣式不一致。

而後是change事件，根據文檔可知，change的事件會帶一個參數，參數值爲tab項的值：

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

一樣在節點內有多個值都是綁定的，好比class的類名，以及tabitem默認值的指向等，綁定的值一樣定義在script內，具體綁定值以下：

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

足部

完成頭部以後，接下來就開始弄足部，足部也很簡單，一樣使用MuseUIDD組件，此次咱們使用Bottom Navigation,固然一樣須要修改css和添加不一樣的事件，足部暫時的代碼以下：

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

首先看到的應該就是第三個item，並無使用mu-bottom-nav-item而是使用了一個普通的div，並綁定了一個itemnumber，將itemnumber添加到data內後的代碼：

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

而後，是對mu-bottom-nav樣式的修改，這個由於都是靜態的，比起頭部來講就簡單多了：

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

而後就是這個組件的change事件，因爲這個組件沒有設置默認值，因此只要點擊即觸發change事件：

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

當前效果

通過書寫後，當前的效果以下：

目前來看，基本符合電影截圖中的樣式，而後就是最最重要的內容頁了，下一章將繼續完善.

謝謝觀看