从零开始一个uni-app入门todo小项目(附源码)

效果：

一、uni-app简介

二、用HBuilderX创建uni-app项目

三、页面搭建与样式编写

先看一下设计图：

1、状态栏

（1）结构：

（2）样式：为了保持代码简洁，我们新建一个css目录单独存放样式

添加类名:

<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="top-container">
			<view class="top">
				<!-- 状态栏左侧 -->
				<view>
					<text class="active-tab">全部</text>
					<text>1条</text>
				</view>
				<!-- 状态栏右侧 -->
				<view>
					<text>全部</text>
					<text>代办</text>
					<text>已完成</text>
				</view>
			</view>
		</view>
	</view>
</template>

编写样式：

.container{
   
		display: flex;
		flex-direction:column;
	}
	.top-container{
   
		position: fixed;/* 在滚动页面时,期望状态栏是固定不动的 */
    left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background-color:#FFFFFF;
		height: 40px;
		box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1);
		z-index: 2;/* 状态栏应该始终显示在上层 */
	}		
	.top{
   
		font-size: 12px;
		margin: 10px 5px 8px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.active-tab{
   
		font-size: 14px;
		color: #279abf;
	}
text {
   
	margin: 0px 5px 0px 5px;
}

2、内容

先看一下要实现什么样的效果：

（1）构建页面添加类名：

<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="top-container">
			<view class="top">
				<!-- 状态栏左侧 -->
				<view>
					<text class="active-tab">全部</text>
					<text>1条</text>
				</view>
				<!-- 状态栏右侧 -->
				<view>
					<text>全部</text>
					<text>代办</text>
					<text>已完成</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="content-list">
				<view class="content-list-check">
					<view class="check-box">
					</view>
				</view>
				<view class="content-list-text">
				</view>
			</view>
		</view>
	</view>
</template>

（2）样式：

.content{
   
		position: relative;
		padding-top: 50px;
		padding-bottom: 130px;
	}
	.content-list{
   
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 15px;
		margin: 10px;
		border-radius: 10px;
		background: #cfebfd;
		font-size: 14px;
		box-shadow: -1px 1px 5px 1px rgba(0,0,0,0.1),-1px 2px 1px 0 rgb(255,255,255) inset;
		overflow: hidden;
	}
	.content-list::before{
   /*用添加伪元素的方式实现蓝色小竖条*/
		position: absolute