状态栏-自定义
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; /*圆形头像*/
}
线性与相对布局
线性布局
.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;
}
====================参考资料===================
1 图片处理
1.1 微信控件官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
1.2 高斯模糊处理
https://www.jianshu.com/p/bb99dc1dfffb
1.3 微信小程序--旋转木马/缩放轮播图效果
https://www.jianshu.com/p/b65feaec5bad?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
2 布局处理
2.1 微信小程序之让view水平垂直居中
https://www.jianshu.com/p/869425b79546
2.2 弹性布局（display:flex;）属性详解
https://www.cnblogs.com/hellocd/p/10443237.html
2.3 微信小程序scroll-view占满剩余屏幕
https://www.jianshu.com/p/05f275d16121
3 状态栏获取
3.1 微信小程序自定义状态栏的高度设置
https://www.jianshu.com/p/c616ca9acf26
3.2 微信小程序顶部导航栏自定义
https://blog.csdn.net/qq_42445490/article/details/88827164
网友评论