- 图片宽高自适应
mode 属性：
默认值：scaleToFill —- 不保持纵横比例缩放图片，使图片的宽高完全拉伸至填满image标签
aspectFit —- 保持纵横比例缩放图片，使图片的长边能够完全显示出来，也就说图片可以完整的显示出来
aspectFill —– 保持纵横比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
top —- 不缩放图片，只显示图片的顶部区域
bottom —- 不缩放图片，只显示图片的底部区域
center —- 不缩放图片，只显示图片的中间区域
left —- 不缩放图片,只显示图片的左边区域
right —– 不缩放图片，只显示图片的右边区域
top left —- 不缩放图片,只显示图片的左上边区域
top right —- 不缩放图片,只显示图片的右上边区域
bottom left —- 不缩放图片,只显示图片的左下边区域
bottom right —- 不缩放图片,只显示图片的右下边区域
- 图片水平居中
.img_icon_bg {
width: 100%;
height: auto;
line-height: 0;
margin-top: 61px;
text-align: center;
}
.img_icon {
width: 95px;
height: 95px;
display: inline-block;
}
- 布局横向排列
display: flex;
flex-direction: row;
4.隐藏NavigationBar
5.VM11106:1 Do not have login handler in current page: pages/login/login. Please make sure that login handler has been defined in pages/login/login, or pages/login/login has been added into app.json
解决方案：
- 检查报错对应js在Page之外是不是var了一些不对的值，如： var RSA = require(‘../utils/wx_rsa.js’);
2.调整app.json中Pages里面的页面注册顺序 ；
3.检查wxml中bindtap是否在js里面将方法创建。
6.switch样式大小调整
大家都知道微信官方提供的switch 能改变color 但是改变大小 常用的width height 不起作用
但是可以这样修改
.wx-switch-input{width:42px !important;height:20px !important;}
.wx-switch-input::before{width:41px !important;height: 20px !important;}
.wx-switch-input::after{width: 18px !important;height: 18px !important;}//中间小圆球
7.input 不沾满屏幕右侧有留白
使用flex布局的时候明明 input style 设置了flex＝1 的属性 可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡， 不知道是不是一个bug，
解决方案： 在input外面包一层view style设置flex＝1 用于沾满整个屏幕 input用于显示文字
xxxx
————————————————
1.display：设置对象是否显示。
2.float：指出对象是否及如何浮动。
3.clear：指出了不允许有浮动对象的边。
4.visibility：是否隐藏，与display隐藏不同，visibility隐藏的时候保留元素占据的位置。
5.overflow：设置对象处理溢出内容的方式。
6.overflow-x：设置在横向溢出内容的方式。
7.overflow-y：设置在纵向溢出内容的方式。
1.display取值
1.block：指定对象为块元素。
2.flex：将对象作为弹性伸缩盒显示。（小程序推荐使用伸缩盒子）
3.inline：指定对象为内联元素。
4.inline-block：指定对象为内联块元素。
5.inline-flex：将对象作为内联块级弹性伸缩盒显示。
6.inline-table：指定对象作为内联元素级的表格。
7.list-item：指定对象为列表项目。
8.none：隐藏对象。不占物理位置。
9.table：指定对象最为块元素级的表格。
2.float(取值：left，right，none，inherit。)
定义了元素在那个方向浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。
float 在绝对定位中不起作用。大多数企业网站布局都是以float来定位。
3.clear：该属性指出不允许有浮动对象的边。（取值：left，right，both，none.）
none:允许两边可以浮动。
left：不允许左边有浮动对象。
right：不允许右边有浮动对像。
both：两边都不允许浮动。
4.visibility：是否显示对象(取值：visible，hidden，collapse。)
visible：设置可见。
hidden：设置隐藏（隐藏了也占位置）。
collapse：隐藏表格的行或者列。
5.overflow：处理溢出内容的方式。(取值：visible，hidden，scroll，auto。)
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不会出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器的时候不出现滚动条，当内容溢出容器的时候出现滚动条。按需出现。
overflow-x：横向处理溢出内容的方式(取值：visible，hidden，scroll，auto。)
overflow-y：纵向处理溢出内容的方式(取值：visible，hidden，scroll，auto。)
其他属性：
display属性
none:此元素不会被显示
block：两个元素自动换行
inline：两个元素靠在一起
inherit：继承父类
flex：多栏多列
flex-direction:
column 垂直分布
row 水平分布
flex-wrap：
nowrap item溢出不换行
wrap 超出的item跳到下一行
justify-content属性
flex-start：左对齐
flex-end：右对齐
center：居中
space-between ：item中间留出等间距
space-around：环绕item流程等间距
align-items item 边界线对齐方式
flex-start | flex-end | center | baseline | stretch
border-bottom 边界线
举个栗子 1px solid #ccc;
align-items item 边界线对齐方式
flex-start | flex-end | center | baseline | stretch
overflow-x 内容超过边框处理方式
visible 显示超出的内容
hidden 隐藏超出的内容
auto 自动加入滚动条