一、事件
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(跳转方式):有效值如下表
网友评论