uview内置样式
文字省略
u-line-1
,u-line-2
,u-line-3
,u-line-4
,u-line-5
五个类名在文字超出内容盒子时,分别只显示一行、两行、三行、四行、五行+省略号
定位
uView内置了关于相对和绝对定位的两个类,分别为u-relative
(u-rela
)和u-absolute
(u-abso
):
.u-relative,
.u-rela {
position: relative;
}
.u-absolute,
.u-abso {
position: absolute;
}
字体大小
#1. 数值形式
uView为了方便用户写字体,通过SCSS生成了一套样式类,专门用于定位字体的大小。对于字体,不同用户可能有喜欢px
,也有喜欢rpx
单位的, 一般来说,在uni-app上,rpx
单位最终表现出来的大小数值为px
的两倍左右,也就是说,24rpx
和12px
的字体大小是差不多的。
uView为此提供了一个类u-font-x
,这个x
为10-40之间(包含10和40),当x >= 10 && x < 20
时,表现为px
性质,当x >= 20 && x <= 40
时,表现为rpx
性质。
用法如下:
- 当
x >= 10 && x < 20
时,表现为px
性质
<view class="u-font-13"></view>
这个.u-font-13
在uView的内部样式定义为:
.u-font-13 {
font-size: 13px;
}
- 当
x >= 20 && x <= 40
时,表现为rpx
性质
<view class="u-font-26"></view>
这个.u-font-26
在uView的内部样式定义为:
.u-font-26 {
font-size: 26rpx;
}
文字对齐
uView为文字对齐定义了3个类,分别如下:
/* 文字左对齐 */
.u-text-left {
text-align: left;
}
/* 文字居中对齐 */
.u-text-center {
text-align: center;
}
/* 文字右对齐 */
.u-text-right {
text-align: right;
}
重置按钮样式 1.6.3
我们知道,uni-app和微信小程序的button
按钮是自带样式的,比如边框,内边距,行高等。在某些特殊场景,我们可能会需要清除这些样式,仅仅只留下按钮文本,就像 单纯的view
元素一样,不带预置样式,场景:
在微信小程序中,我们知道button
设置open-type
参数为getUserInfo
(或者分享场景),点击按钮可以弹出让用户授权的系统弹窗,有时候我们可能需要按钮形式展现,但也有时候我们仅仅需要 "点击登录/授权/分享"几个字,同时具备获取相应的功能,就需要清除按钮的样式了,只需要给button
加上u-reset-button
类名即可。
<button class="u-reset-button">点击登录</button>
#flex布局
在看这个部分的时候,请确保您对flex
是了解的,否则可以参考阮一峰的flex教程
由于我们经常要使用flex
布局,而其中的大部分样式又都是重复的,总是少不了如下的几句:
/* 父盒子 */
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
/* 子元素 */
flex: 1;
基于以上,uView定义了一个最常用的总集合类,名为u-flex
,其内部值如下:
#1. 总超集
.u-flex {
display: flex;
flex-direction: row;
align-items: center;
}
#2. 子元素是否换行
/* 换行 */
.u-flex-wrap {
flex-wrap: wrap;
}
/* 不换行 */
.u-flex-nowrap {
flex-wrap: nowrap;
}
提示
当我们写这些跟flex
相关的类名时,总应该把u-flex
写在class
多个类名的左边,因为u-flex
是一个集合类,如果你不想要其中的某个属性,如align-items: center
,可以通过右边的类名覆盖它。
覆盖u-flex
中的align-items: center
(对齐),改为顶部对齐u-col-top
:
<view class="u-flex u-col-top">
......
</view>
最终内部表现如下(其它以此类推):
.u-flex {
display: flex;
flex-direction: row;
align-items: center;
}
/* 由于align-items: flex-start在后面,故覆盖了"u-flex"的align-items: center */
.u-col-top {
align-items: flex-start;
}
#3. 子元素在上下左右的对齐方式
这里类名的命名依据为,col
为column
(列,竖向)的缩写,row
为行的意思(横向),所以就有垂直方向上的诸如u-col-center
表 垂直居中对齐,u-row-left
代表水平左对齐。
此类名控制的是子元素,是需要写在父元素盒子上的:
/* 垂直居中 */
.u-col-center {
align-items: center;
}
/* 顶部对齐 */
.u-col-top {
align-items: flex-start;
}
/* 底部对齐 */
.u-col-bottom {
align-items: flex-end;
}
/* 左边对齐 */
.u-row-left {
justify-content: flex-start;
}
/* 水平居中 */
.u-row-center {
justify-content: center;
}
/* 右边对齐 */
.u-row-right {
justify-content: flex-end;
}
/* 水平两端对齐,项目之间的间隔都相等 */
.u-row-between {
justify-content: space-between;
}
/* 水平每个项目两侧的间隔相等,所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
.u-row-around {
justify-content: space-around;
}
#4. 子元素空间分布
此类名是写在子元素的class
中的,主要用于决定子元素占据的父元素的空间大小,类名为u-flex-x
,x
的取值为x >= 1 && x <= 12
:
.u-flex-1 {
flex: 1;
}
.u-flex-2 {
flex: 2;
}
.u-flex-3 {
flex: 3;
}
/* ...... */
.u-flex-12 {
flex: 12;
}
#内外边距
uView定义了一套内外边距的类名,调用简单,方便用户使用,类似u-padding-x
、u-margin-left-x
等,这里的x
取值规则如下:
- 1-80(可以等于80)之间的偶数(双数)
- 能被5除尽的1-80之间的数,如5,10,15,35等
类名的取值有如下:
注意: uView同时也给了一套简写的方法,二者是等价的。
- u-padding-x == u-p-x
- u-padding-left-x == u-p-l-x
- u-padding-top-x == u-p-t-x
- u-padding-right-x == u-p-r-x
- u-padding-bottom-x == u-p-b-x
- u-margin-x == u-m-x
- u-margin-left-x == u-m-l-x
- u-margin-top-x == u-m-t-x
- u-margin-right-x == u-m-r-x
- u-margin-bottom-x == u-m-b-x
如果我们想定义26rpx
的左外边距:
<view class="u-margin-left-26"></viwe>
这个.u-margin-left-26
在uView的内部样式定义为:
.u-margin-left-26 {
margin-left: 26rpx;
}
如果我们想要35rpx
的内边距:
<view class="u-padding-35"></viwe>
这个.u-padding-35
在uView的内部样式定义为:
.u-padding-35 {
padding: 35rpx;
}