前端 uni-app 框架之实战主要技术栈 day_3

作者：黎燃

2022 年 6 月 14 日
本文字数：1445 字
阅读完需：约 5 分钟

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

发布于: 刚刚阅读数: 6

原文链接:【http://xie.infoq.cn/article/5b120e08ef5620029d434e394】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

前端 uni-app 框架之实战主要技术栈 day_3

实现 tabbar

file 样式导入

选择器

globalStyle

黎燃

评论