小程序初接触-我的又一语言

记录一下开发中的“万金油”

*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;

 待更新~