效果:
一、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;
content: ''