持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

实现tabbar

在这里插入图片描述

在pages下面创建tabbar文件夹，然后在此文件夹下创建三个文件夹，右击新建页面，勾选上在pages.json注册

"tabBar":{
		"color":"#666",
		"selectedColor":"#f07373",
		"backgroundColor":"#FFFFFF",
		"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":"我的"
			}
		]
	}

我们创建 studentInfoBox.vue 来表示装载一个学生信息的盒子，这个.vue文件里面可以配置一些css和script，这些配置都是该组件独有的，不会被全局的配置覆盖，这意味着组件之间解耦，可以更灵活的组装。

而且css支持 rpx，即灵活像素。默认屏幕宽为750rpx，在任意设备上，均会以比例换算rpx。比如现在有宽1500px的屏幕，而配置了 1rpx 的大小，实际上就是 2px 显示。

我们编写如下的 .vue代码到 studentInfoBox.vue，其中student为上级传递过来的数据变量，这个待会解释，我们先将变量绑定到对应的标签上面。

<template>
	<view class="mainBox">
		<view class="nameBox">{{student.name}}</view>
		<view class="numberBox">{{student.number}}</view>
		<view class="genderBox">{{student.gender}}</view>
	</view>
</template>

<script>
	export default {
		props: ["student"],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.mainBox {
		border-bottom: #333333 solid 1rpx;
	}
	.nameBox {
		background-color: #8F8F94;
		width: 100rpx;
		display: inline-block;
	}
	.numberBox {
		background-color: #999999;
		width: 250rpx;
		display: inline-block;
	}
	.genderBox {
		background-color: #F1F1F1;
		width: 50rpx;
		display: inline-block;
	}
</style>

file样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用表示语句结束。

<style>
 @import "../../common/uni.css";
 .uni-card {
  box-shadow: none;
 }
</style>

框架组件上支持使用style，class属性来控制组件的样式 style:静态的样式统一写到class中，style接收动态的样式，在运行解析，请尽量避免将静态样式写进style中，以免影响渲染速度。

选择器

目前支持的选择器有： .class .intro 选择所有拥有 class="intro" 的组件 #id #firstname 选择拥有 id="firstname" 的组件 element view 选择所有view 组件 element, element view, checkbox 选择所有文档的view 组件和所有的checkbox 组件

::after view::after在view组件后边插入内容，仅微信小程序和5+app生效 ::before view::before在view组件前边插入内容，仅微信小程序和5+app生效

globalStyle

用于设置应用的状态栏，导航条，标题，窗口背景色等。 navigationBarBackgroundColor 导航栏背景颜色

navigationBarTextStyle 导航栏标题颜色

navigationBarTitleText 导航栏标题文字内容

navigationStyle 导航栏样式

backgroundColor 窗口的背景色

前端uni-app框架实现tabbar实战运用心得

实现tabbar

file样式导入

选择器

globalStyle