uni-app学习笔记四（第5章项目实战：项目初始化，导航栏，选项卡制作）

本文链接：https://blog.csdn.net/wangrunhuan/article/details/111770168

项目初始化

创建uniapp项目-tabbar

注意要选上云数据库。登录unicloud账号。
项目文件夹右键选择创建云服务空间。创建https://uniapp.dcloud.io/uniCloud/cf-database?id=db_init
给云服务空间起名即可。
创建数据，项目文件夹右键选择创建db_init.json。
下面的内容拷贝自官网的例子，删掉索引。先简单了解一下。

这里要注意，云空间是连接上的状态才可以初始化。

上面是个例子，下面使用正式的初始化文件。
文件：https://github.com/TreeWish/imooc-news/blob/master/cloudfunctions-aliyun/db_init.json
拷贝到db_init.json中，然后初始化。

2.导入项目图片到static。

新建页面如下：

到pages.json中添加tabbar。如下：

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
下面是添加的
	"tabBar":{
		"color":"#666",
		"selectedColor":"f07373",
		"backgroundColor":"#007AFF",
		"list":[{
			"pagePath":"pages/tabbar/index/index",
			"iconPath":"static/home.png",
			"selectedIconPath":"static/home-active.png",
			"text":"首页"
		},
		{
			"pagePath":"pages/tabbar/follow/follow",
			"iconPath":"static/follow.png",
			"selectedIconPath":"static/follow-active.png",
			"text":"关注"
		},
		{
			"pagePath":"pages/tabbar/my/my",
			"iconPath":"static/my.png",
			"selectedIconPath":"static/my-active.png",
			"text":"我的"
		}
		]
	}

此时，实现效果如图：

再在每个页面中添加点文字，区别一下，类似下面这样，这样运行的时候，点击tabbar查看页面切换效果。

<template>
	<view>
		关注
	</view>
</template>

实现导航栏

先将index中的默认样式代码去掉。运行，可见有默认的导航栏。为了能够实现搜索栏在上面，所以需要把默认的导航栏去掉，改成自定义的导航栏。
page.json中添加 custom ,自定义，如下图效果，把原先的覆盖掉。可见右边是顶到头了。

如何添加自定义组件
1.新建组件文件夹和组件文件。如下

引入，注册，使用

需要提到的是如果自己添加的组件目录符合如下格式（组件文件夹名和组件文件名一致），
uniapp是可以自己找到组件的。下面的代码也是可以运行同样效果的。不用引入，注册，可以直接使用。
还有个注意点，当前所有的style都使用sass,这个要注意修改。

这里美化一下导航栏组件，增加navbar的class.

导航栏样式：

由于背景色是经常用的主色调，所以可以设置为变量(mk-base-color)声明到uni.scss文件中。如下

/* 颜色变量 */
$mk-base-color:#f07373;
运行效果

然后添加搜索图标和搜索文本输入框

前端标签意思记录：
justify-content:center 水平方向居中
align-items ：center 垂直方向居中
display:flex ：调整为一行显示
pading : 内容和框边直接的距离
box-sizing: border-box; 盒内显示
boder-radius : 30px; 圆角
position : fixed; 固定搜索栏，不让它随着上下滑动而跑出屏幕外。
z-index:99; 让导航栏始终在最前面，挡住其他的。

此时的问题是导航栏挡住了下面100个列表数据的前几行。所以希望导航栏占位来把列表挤出去。

<style lang="scss">
	.navbar{
		.navbar-fixed{ //注意这里。其他的都放在这里面了。然后这个设置为固定位置就把列表挤下去了
			position: fixed;
			top:0;
			left: 0;
			z-index: 99;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 15px;
			width: 100%;
			height: 45px;
			background-color: $mk-base-color;
			// 盒内显示
			box-sizing: border-box;
			.navbar-search{
				display: flex;
				align-items: center;
				height: 30px;
				width: 100%;
				padding: 0 10px;
				border-radius: 30px;
				background-color: #FFFFFF;
				.navbar-search_icon{
					width: 10px;
					height: 10px;
					// border: 1px red solid;
					margin-right: 10px;
				}
				.navbar-search-text{
					font-size: 12px;
					color: #999999;
				}
			}
		}
	}
</style>

目前，导航栏运行在内置浏览器是正常的，但是运行在小程序是有如下的问题。状态栏多出来了。

通过增加标签再调整。如下，获取手机状态栏的高度，然后付给标签。让标签占位把搜索栏挤下去。
从而实现微信小程序也正常显示。这样小程序和H5都能正常显示了。小程序有状态栏，h5没有状态栏。

这里有点问题，原视频教程5-2与5-3之间缺少关于右边那个位置的胶囊是如何做出来的，没有解释。
下面这个是教程中小程序端的显示结果，h5页面是没有显示这个的。
暂时先不深究，等学完了再回来看看怎么做。
下面关于胶囊位置的计算在h5是编译不过的。需要加上条件编译屏蔽掉这部分代码。
这里主要学习格式的调整和界面的美化，条件编译等等吧。其他的先不深究。
或者有知道的也欢迎留言。

使用字体图标

先去iconfont.cn网站选一个图标，添加到购买，也有免费的。然后复制下面的代码到浏览器，获得图标的css代码。

得到

新建文件夹和文件，贴入上面复制的代码

导入到页面中

使用方法，class里面的iconfont icon-search是来自于icons.css里面的。

上面这种方式比较麻烦，推荐下面这种。在插件市场找，然后导入项目中。

使用如下，超级简单。

还可以修改细节，大小，颜色等等

比如修改成关闭，图标就变成关闭的×了。

选项卡制作

这里暂时用的是本地的数据。
大致步骤就是编辑tab.vue，然后index使用这个tab标签即可。
内容主要是各种格式的调节，所以不记录了。直接上完成后的代码。
先看效果：

tab.vue代码：

<template>
	<view class="tab">
		<scroll-view class="tab-scroll" scroll-x>
			<view class="tab-scroll_box">
				<view v-for="item in list" :key="index" class="tab-scroll_item">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="tab-icons">
			<uni-icons type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					name:'王震锁'
				},
				{
					name:'vue'
				},
				{
					name:'java'
				},
				{
					name:'python'
				},
				{
					name:'C++'
				},
				{
					name:'学习'
				},				{
					name:'电话'
				},		{
					name:'英语'
				},				{
					name:'博客'
				}]
			};
		}
	}
</script>

<style lang="scss">
	.tab{
		display: flex;
		width: 100%;
		border-bottom: 1px #4CD964 solid;
		background-color: #F1F1F1;
		box-sizing: border-box;
		.tab-scroll{
			// 让tab撑满整个元素
			flex: 1;
			// 溢出隐藏
			overflow: hidden;
			// 块内
			box-sizing: border-box;
			.tab-scroll_box{
				display: flex;
				// 垂直居中
				align-items: center;
				// 不换行
				flex-wrap: nowrap;
				height: 45px;
				box-sizing: border-box;
				.tab-scroll_item{
					// 不缩放
					flex-shrink: 0;
					// 上下是0 左右是10
					padding: 0 10px;
					// 字体颜色
					color: #333;
					font-size: 14px;
				}
			}
		}
		.tab-icons{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 45px;
			position: relative;
			// & 父级
			&::after {
				content: '';
				position: absolute;
				top: 12px;
				bottom: 12px;
				left: 0;
				width: 2px;
				background-color: #ddd;
			}
			
		}
	}
</style>

index.vue使用的代码：

<template>
	<view class="content">
		<navbar></navbar>
		<tab></tab>
	</view>
</template>

好了，就这样。