小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新刚刚提交的数据。
解决思路
使用redirectTo的方式跳转页面,在当前页面获取首页并调用首页的刷新方法。 在当前页中获取首页的方法可以用 getCurrentPages(),具体实现方法如下:
该方法写在新增成功的请求接口里。
wx.showToast({
title: "上传成功",
duration: 2000,
success: function () {
wx.navigateTo({
url: '../index/index?active='+ that.data.active,
complete: function(){
wx.hideLoading()
}
})
let pages = getCurrentPages(), prePage;
if(that.data.id){
prePage = pages[pages.length - 3]; // 编辑页
} else {
prePage = pages[pages.length - 2]; //新增页
}
// let prePage = pages[pages.length - 2];
prePage.refresh()
},
});
在要跳转的目标页面中定义页面刷新的方法。在以上代码中,prePage为首页,refresh()为首页中刷新数据的方法。
拓展知识点:微信小程序的下拉刷新
微信小程序的下拉刷新:
在page的js文件中有监听用户下拉刷新的处理函数onPullDownRefresh:function(){} //js文件中自带的处理函数,在onUnload下面,注意不要重复写 此外需要注意,使用下拉刷新需要在page.json中
{
"enablePullDownRefresh": true,//允许下拉刷新
}
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("下拉刷新")
//刷新页面时需要重新调用的接口
wx.request({
url: 'test.php', //接口地址
method:'POST',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data)
//停止下拉刷新
wx.stopPullDownRefresh()
}
})
},
分享结束,有问题欢迎随时指正。