uniappuview内置样式记录
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。