bug
tabbar 页面离开均执行 onHide ,
二级页面前进执行 onHide ,后退执行 onUnload
页面栈
let pages = getCurrentPages(); //获取当前页面信息栈
pages.length为页面栈层数(包括当前页,如果是一进来第一个页面,则为1)
let prevPage = pages[pages.length-2] //获取上一个页面信息栈(pages为数组,所以-2)
1、跳转方式
-
wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 -
wx.reLaunch(Object object)
基础库 1.1.0 开始支持,低版本需做兼容处理。
关闭所有页面,打开到应用内的某个页面 -
List wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 -
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
只有这个页面有返回按钮
2、普通页面跳转并携带参数
wx.navigateTo({
url: `/pages/circle_detail/circle_detail?id=${id}` // 携带参数
})
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options.id); // 接收参数
},
3、页面返回不刷新并携带参数
在返回前将参数存在本地,返回后从本地取出
// 点击话题,返回创建圈子页面
back(e) {
// 0 不参与 1 新话题 其他 选中的话题
let val = e.currentTarget.dataset.val;
let topic;
console.log(val);
if (val == 0) {
topic = ''
} else if (val == 1) {
topic = this.data.searchVal
} else {
topic = val
}
wx.setStorageSync('topic', topic) //先存储,再返回
wx.navigateBack({
delta: 1, //返回的层数
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
let topic=wx.getStorageSync('topic')
console.log(topic);
},
4、返回上一页并刷新页面或刷新组件
情况一 返回使上一个页面刷新,可以将初始化数据请求接口放在onshow(),而不是onload ()
情况二 返回使上一个页面中的组件刷新
例如:页面关系 a页面中组件a1,跳转b页面,返回a1刷新
// a页面定义一个变量showCommy控制组件a1显示隐藏
<com-my wx:if="{{showCommy}}"></com-my>
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
showCommy: true
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
this.setData({
showCommy: false
})
},
// a1组件,在ready()中调初始化数据接口
ready() {
request('circle/circleList', {
condition: 2
}).then(data => {
console.log(data) // 成功回调
this.setData({
list: data.list
})
})
},