微信小程序新增成功返回列表页时自动刷新的解决方案

947 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新刚刚提交的数据。

解决思路

使用redirectTo的方式跳转页面,在当前页面获取首页并调用首页的刷新方法。 在当前页中获取首页的方法可以用 getCurrentPages(),具体实现方法如下:

该方法写在新增成功的请求接口里。

wx.showToast({

        title"上传成功",

        duration2000,

        successfunction () {

          wx.navigateTo({

            url'../index/index?active='+ that.data.active,

            completefunction(){

              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()
      }
    })
  },

分享结束,有问题欢迎随时指正。