uni-app day 3 自定义选项卡

1. 配置底部tabBar

"tabBar": {//2-5个选项
		"color": "#666",
		"selectedColor": "#f07373",
		"backgroundColor": "#fff",
		"list": [
			{
				"pagePath": "pages/tabbar/index/index",//声明路径
				"iconPath": "static/home.png",
				"selectedIconPath": "static/home-active.png",//选中后的路径
				"text": "首页"
			}
		]
	}

2. 组件

一般情况下创建一个组件需要安装、引用、注册三个过程
1、在components目录创新组件文件
2、在页面文件中使用import 组件名 from 路径引用
3、在export default中的components类中注册
uni-app有easyCom功能，可以自动注册

3. 适配导航栏、小程序状态栏

适配状态栏
先在data中声明一个变量 statusBarHeight 用来获取状态栏高度
然后在export default中创建created函数，使用API获取系统参数

created() {
			//获取手机信息
			const info = uni.getSystemInfoSync()
			//获取高度，设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			
			//获取宽度
			this.windowWidth = info.windowWidth
			//适配小程序顶部胶囊h5 app ma-alipay不支持 
			//#ifndef H5 || APP-PLUS || MP-ALIPAY
			//获取胶囊的位置
			const menuButtoninfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtoninfo);
			//（胶囊底部高度-状态栏的高度）+（胶囊顶部高度-状态栏的高度）=导航栏的高度
			this.navBarHeight = (menuButtoninfo.bottom - info.statusBarHeight) + (menuButtoninfo.top - info.statusBarHeight)
			this.windowWidth = menuButtoninfo.left
			//#endif
		}

4. 自定义图标

在插件市场使用HBuilderX导入图标组件

就可以直接使用uni-icons组件标签引入图标
通过图标名称获取图标，可以设置大小与颜色

<uni-icons type="search" size="16" color="#999"></uni-icons>

5. 选项卡组件

使用弹性盒子
flex-wrap； 设置换行
flex-direction； 设置起点
display: flex； 开启弹性布局
align-items； 关于交叉轴对齐
align-content； 垂直对齐方式
justify-content； 水平对齐方式
box-sizing； 规定容器元素的最终尺寸计算方式
属性border-box，会规定加上padding、border等的总大小
属性content-box，只规定内容的宽度与高度而不包括padding、border
flex-basis； 该属性用来设置元素的宽度，会覆盖width
flex-grow； 该属性用来设置当父元素的宽度大于所有子元素的宽度的和时，子元素如何分配父元素的剩余空间
flex-shrink； 该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度

6. 选项卡数据初始化

1. 创建云函数

const db = uniCloud.database() //创建数据库的引用
exports.main = async (event, context) => {

	//获取label表的数据
	let label = await db.collection('label').get()

	//返回数据给客户端
	return {
		code: 200,
		msg: '数据请求成功',
		data: label.data
	}
};

2. 在页面methodr类中创建调用云函数的方法

	在data中创建tabList数组接收这些数据

getLabel() {
				//调用云函数方法
				uniCloud.callFunction({
					name: 'get_label',//调用这个云函数
				}).then((res) => {
					const {result} = res
					this.tabList = result.data
					console.log(this.tabList);
				})
			}

3. 在index页面的tab组件中声明一个变量，将tabList赋值给它

<tab :list="tabList"></tab>//此时list还没有声明

4. 在组件tab.vue中声明props类，接收list

props: {
			list: {
				type: Array,   //希望接收一个数组
				default () {   
					return []  //返回值是一个数组
				}
			}
		}