如果你想开发一个应用(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- 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- 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="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{
	33%;
}
.iconclass{
	color: #757575;
}

然后就是这个组件的change事件，由于这个组件没有设置默认值，所以只要点击即触发change事件：

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

当前效果

经过书写后，当前的效果如下：

目前来看，基本符合电影截图中的样式，然后就是最最重要的内容页了，下一章将继续完善.

谢谢观看