实现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
窗口的背景色