一、事件
1.1
点击事件：tap 长按事件: longtap
触摸事件:touchstart touchend touchmove touchcancel
注意:touchend是正常触摸完毕后触发，而touchcancel是当触摸还未结束就被其他事件打断（例如突然来电话）则会触发该方法。
其他事件: submit input 等等
1.2 事件绑定
bindTap与catchTap区别: bindTap会触发冒泡, catchTap则只针对自己的事件
二、布局
1 flex布局
布局转换flex布局方式:
display:flex;
布局转换排列方式(设置主轴/交叉轴):
flex-direction:row/column 横向/纵向
当一行排列不下时，过多元素会导致元素变形。决定元素如何换行:
flex-wrap:nowrap/wrap/wrap-reverse 不换行（默认）/换行/反向换行(改变换行方向)
简写方式
flex-flow:row wrap; //横向排列且换行
元素在主轴上的对齐方式:
justify-content:flex-start/flex-end/center/space-around/space-between;
左对齐/右对齐/居中对齐/元素平分主轴长度/元素平分主轴长度且两边对齐
元素在交叉轴上的对齐方式:
align-items:flex-start/flex-end/center/stretch/baseline;
左对齐/右对齐/居中对齐/元素没有设置高度时自动在交叉轴占据容器高度/以元素内部文字基准线对齐
有多余空间时，内部元素的放大比例(可作为权重用):
flex-grow:1 // 默认值0不放大
当空间不足时，内部元素的缩小比例
flex-shrink:0 //默认值1等比缩小
元素在主轴上占据的空间:
flex-basis:200px; //这里rpx不会生效必须使用px
简写:
flex:1 1 300px; //grow,shrink,basis的简写
定义元素的排列顺序
order:1 //值是权重，越大的在布局时排序越靠前
定义元素自身的对齐方式:
align-self:flex-end;
三、定位
相对定位：相对于元素自己的位置,仍占用原来的位置
绝对定位：相对于已经声明定位的父容器的位置，不占用原来的位置
item{
position:relative/absolute; //相对/绝对定位
top:50rpx; //顶部偏移量
left:50rpx; //左部偏移量
}
四、跳转的五种方式
1.wx.navigateTo({})
注意：不能跳转到tabBar页面；带参格式：【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】
wx.navigateTo({
url:'../test/test?id=1&page=4',//跳转页面的路径，可带参数？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
success:function(){} //成功后的回调；
fail：function(){} //失败后的回调；
complete：function(){} //结束后的回调(成功，失败都会执行)
})
//传递的参数在接收页面onLoad()函数中得到值：option.【参数名】就可以得到了
onLoad: function (option) {
this.setData({
id:option.id,
});
1.1.wx.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。
可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
2.wx.redirectTo(OBJECT)
关闭（之前的页面是回不去的）当前页面，跳转到非tabBar的某个页面
注意：不能跳转到tabBar页面；【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】
3.wx.reLaunch(OBJECT)
关闭（之前的页面是回不去的）所有页面，打开到应用内的某个页面。
注意：【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】 ；【如果是跳转到tabBar页面，则不能带参数】
4.wx.switchTab(OBJECT)
跳转到tabBar的某个页面，并关闭其他所有非 tabBar 页面
注意：目标页面必须是在：app.json 的 tabBar 中定义的页面；不能带参数
5.组件
- url:和上面几种方式的规则一样，当前小程序内的跳转链接
- open-type（跳转方式）：有效值如下表
网友评论