记录一下开发中的“万金油”
*UI居中解决方案：
一：
display:flex;
align-items:center;/*垂直居中*/
justify-content:center;/*水平居中*/
flex-wrap:wrap;/*子元素可换行*/
二：（父类也要设置大小，并需要清除浮动，clear: both;浮动有可能集成）
margin: auto;
*字体居中解决方案：
text-align:center;/*字体水平居中*/
/*UI的height与line-height相同即可，垂直居中*/
height:30rpx;
line-height:30rpx;
*css的calc用法：
width:calc(100vw-30rpx-400rpx-140rpx-40rpx);
*style三目运算，设置样式的用法：
/*下面这些变量可定义在js中的data里面*/
【currentTab:0,//当前选中tab页下标
navColor_p:'#00C87D',//tab选中颜色
navLineColor_n:'#ffffff',//未选中的线颜色
navLineHeight_n:0,//tab线未选中高度
navLineHeight_p:7,//tab线选中高度】
/*下面设置在UI的HTML标签中*/
style='color:{{currentTab==0 ?navColor_p : ""}}; border-bottom-style: solid; border-bottom-color: {{currentTab==0 ?navColor_p : navLineColor_n}};border-bottom-width: {{currentTab==0 ?navLineHeight_p : navLineHeight_n}}rpx;'
*超出UI字体省略的用法：
第一种：
width:calc(100vw-30rpx-250rpx-30rpx-20rpx-12rpx-30rpx);/*固定好宽度*/
height:100%;
/*禁止换行*/
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
第二种：
height:30rpx;
width:400rpx;
display:-webkit-box;
-webkit-box-orient:vertical;
/* 设置第几行，会发生缩略 */
-webkit-line-clamp:1;
overflow:hidden;
/*设置line-height 解决三星手机文字上下间距问题【三星手机的字体行高普遍存在问题，设置规定的行高可以规避问题】 */
line-height:40rpx;
待更新~
网友评论