1.跳转页面的方式
- 跳转目标页关闭当前页 -
wx.redirectTo(OBJECT) - 跳转目标页保留当前页 -
wx.navigateTo(OBJECT) - 跳转目标页关闭所有页 -
wx.reLaunch(OBJECT) - 跳转tabBar页，关闭其他所有非tabBar页 -
wx.switchTab(OBJECT) - 关闭当前页 ，返回上级或多级页
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //上一个页面
wx.navigateBack({
delta: prevPage
})
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
wx.navigateTo({
url: 'B'
})
// 此处是B页面
wx.navigateTo({
url: 'C'
})
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
delta: 2
})
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面
- 页面跳转+带参
A.普通参数
<!--传参页面-->
wx.navigateTo({
url: '../order/order?flag='1'&title='2'
})
<!--目标页面.js-->
onLoad: function (options) {
this.setData({
flag: options.flag,
title: options.title,
})
}
B.数组 字典 对象参数 通过 JSON.stringify()格式化在传参
<!--传参页面-->
var moduleInfo={
"id": 2,
"moduleName": "培训课程",
"moduleTable": "train_title_list_detail",
"iconPath": "/xcx/icon/train_curriculum.png"
};
wx.navigateTo({
url: '../list/list?moduleInfo=' + JSON.stringify(moduleInfo)
})
<!--目标页面.js-->
onLoad: function (options) {
this.setData({
moduleInfo: JSON.parse(options.moduleInfo),
})
},
2.Flex布局 【从左到右为交叉轴，从上到下为主轴】
- flex-direction这个属性是用来规定flex项目在轴方向上面排列的顺序。
属性：
flex-direction: row | row-reverse | column | column-reverse;
row
如果规定的方向是 ltr（left to right）项目一次从左往右排列，
如果规定的方向是 rtl（right to left）项目一次从右往左排列，
row是默认值。
row-reverse
如果规定的方向是 ltr（left to right）项目一次从右往左排列，
如果规定的方向是 rtl（right to left）项目一次从左往右排列，
row 和 row-reverse 是相反的。
column 跟row是类似的，只不过是从上到下的方向排列的。
column-reverse 跟row-reverse 是类似的，只不过是从下到上的方向排列的。
- flex-wrap是决定项目是否多行显示的属性，项目默认情况下是在一行下显示的。
属性：
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap 指的是在一行显示不换行；
wrap 指的是多行显示；
wrap-reverse 指的是多行显示，但是跟规定排列方向相反；
flex-flow是 flex-direction 和 flex-wrap 的缩写
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
上面css即：
.container {
display: flex; /*or inline-flex*/
flex-flow: row wrap；;
}
- justify-content用于在主轴上对齐伸缩的项目属性
属性：
justify-content: flex-start | flex-end | center | space-between | space-around;
3.事件
- 冒泡事件： 当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
以下为冒泡事件，其他组件事件无特殊申明都是非冒泡事件
小例
<view id='outter' bindtap='handleTap1'>
outer view
<view id='middle' catchtap='handleTap2'>
middle view
<view id='inner' bindtap='handleTap3'>
inner view
</view>
</view>
</view>
事件以bind或者catch开头
bind事件绑定不会阻止冒泡事件向上冒泡，如bindtap。
catch事件绑定可以阻止冒泡事件向上冒泡，如catchtap。
因为handleTap2是catchtap，所以：
点击 inner view，会先后触发 handleTap3、handleTap2
点击 middle view，只会触发 handleTap2
点击 outer view，会触发 handleTap1
如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。（见下图，事件对象）
4.顶部或底部固定
<!-- 顶部固定 -->
<view class="page__hd" style="position:fixed; top:0;width: 750rpx;">
......
</view>
<!-- 底部固定 -->
<view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;">
......
</view>
5.修改数组对象中的某个值
//数据
data:{
role: [
{ id: '1', name: '管理员', checked: false },
{ id: '2', name: '一级代理', checked: false },
{ id: '3', name: '二级代理', checked: false },
],
}
//修改点击项的checked值
clickSheet: function (e) {
var index = e.currentTarget.id;
//先用一个变量，把(role[0].checked)用字符串拼接起来
var checked= "role[" + index + "].checked";
//在如此set即可
this.setData({
[checked]: !this.data.role[index].checked,
})
}，
6.修改某个页面的值
A页面跳转B页面，B修改A页面数据 如下：
//A页面
...
data: {
text: 0,
},
...
//B页面
...
changeValue: function() {
var pages = getCurrentPages();
var prePage = pages[pages.length - 2];
prePage.setData({
text: 1
})
},
...
//此刻再回到A页面其中text的值已经变成了1
7循环
//Object的循环
var par = { a: 1, b: 2 };
for (var item in par) {
console.log(item + ':' + par[item])
}
