android小程序的布局,小程序样式-常用css布局对比Android

状态栏-自定义

xxx.json 状态栏颜色 仅支持 black/white

{

"usingComponents": {},

"navigationBarTextStyle": "white",

"navigationStyle": "custom"

}

文字与图片常用属性

一般直接从蓝湖等设计图直接copy代码再改改。

.tv_content {

/*TextView for text*/

width: 100%; /*layout_width 宽度*/

height: 100%; /*layout_height 高度*/

font-size: 28rpx; /*textSize 文字大小*/

color: #e64340; /*textColor 文字颜色*/

background: linear-gradient(to right, #ff1919, #ff6533); /*background 背景 */

border-radius: 3px; /*shape 圆角*/

padding: 0rpx; /*padding 内边距 */

margin: 0rpx; /*layout_margin 外边距*/

font-weight: bold; /*取值(100-900)：mormal：正常大小相当于400。bold :粗体，相当于700。bolder， lighter。*/

border-style: solid; /*设置边框类型*/

border-width: 1px; /*设置边框粗细*/

border-color: #ff1919; /*设置边框颜色。*/

display: flex;

align-items: center; /**水平居中*/

justify-content: center; /**垂直居中*/

overflow: hidden; /*文本单行*/

white-space: nowrap;

text-overflow: ellipsis;

overflow:hidden;/*两行省略号*/

text-overflow: ellipsis;

display:-webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow:hidden; /* swiper 让照片循环的时候不变成直角 */

transform: translateY(0); /*适配ios*/

}

.iv_content {

/*ImageView for image mode="widthFix" 属性参考：https://developers.weixin.qq.com/miniprogram/dev/component/image.html*/

width: 100%; /*layout_width 宽度*/

height: 100%; /*layout_height 高度*/

margin: 0rpx; /*layout_margin 外边距*/

border-radius: 25rpx; /*圆形头像*/

display: flex;/*图片排列出现间隔 参考：https://blog.csdn.net/lihonghuisir/article/details/80168765*/

}

线性与相对布局

线性布局

.ll_content {

/**LinearLayout,父元素*/

display: flex;/*scroll-view 横向滑动，需要设置成display: inline-block; 父布局要加white-space: nowrap;*/

flex-direction: column; /*元素排列方向【row：横向排列】【column：纵向排列】*/

justify-content: start; /*水平对齐方式【start：从左到右】【space-between：两端对齐】【center：居中】*/

align-items: flex-start; /*垂直对方方式【flex-start：从上到下】【center：居中】*/

flex-wrap:wrap; /*for循环外层需要这个属性，实现一行多个元素时需要配合display: flex; */

}

.v_content_child {

/*子元素，占满剩余屏幕方法*/

flex: 1; /*剩余充满，类似Android weight属性*/

height: 0rpx; /*表示高度充满剩余屏幕，常用于1:1这种*/

}

相对布局

.rl_content {

/**RelativeLayout，父元素*/

position: relative; /**相对定位，子元素的absolute才能生效*/

}

.v_content_child {

/**子元素*/

position: absolute;

bottom: 0rpx:/*如果设置了这个属性，则元素居底部对齐*/

}

适配

/*小程序 1像素 线的适配。方案*/

.line{

height: 1rpx;

border-bottom: solid 1rpx #E3E3E3;

}