欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序左上角返回刷新

程序员文章站 2022-06-04 13:37:35
...

微信小程序左上角返回刷新


前言

从A页面跳转到B页面,再从B页面通过左上角返回按钮,返回到A页面,此时A页面不刷新;
此片文章主要解决这个问题


一、小程序生命周期

处理这个问题的前提是我们必须要对小程序的生命周期有一个简单的认识

这里是对生命周期做简单介绍,以保证理解本篇解决问题的方案,详解会给出飞机票,前往官网查看

  onLoad(options) {
    console.log('onLoad监听页面加载');
  }

  onReady() {
    console.log('onReady监听页面初次渲染完成');
  }

  onShow() {
    console.log('onShow监听页面显示');
  }

  onHide() {
    console.log('onHide监听页面隐藏');
  }

  onUnload() {
    console.log('onUnload监听页面卸载');
  }

那么小程序页面初始化时会调用那几个呢

微信小程序左上角返回刷新

从中我们可以知道小程序页面初始化调用顺序为:onLoad>onShow>onReady。

onHide函数就是当隐藏页面的时候触发

二、解决方案(重点来了)

从A页面跳转到B页面,再从B页面通过左上角返回按钮,返回到A页面,如何刷新A页面呢;

1.在data里创建标识

data: {
    onShowFlag: 0,
  },

2.查看初始化onload中调用的初始化的方法

代码如下(示例):

onLoad: function (options) {
    // 获取消息列表
    this.getmessageList()
    // 查询申请好友列表
    this.getfriendList()
  },

3.在onShow中这样写

代码如下(示例):

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var { onShowFlag } = this.data
    this.setData({
      onShowFlag:onShowFlag + 1
    })
    if (this.data.onShowFlag != 1) {
      // 获取消息列表
      this.getmessageList()
      // 查询申请好友列表
      this.getfriendList()
    }
  },

三、总结:

至此就可以简单的完成我们的目的了;
小程序生命周期还是要明白原理的,给你一张 免费机票去旅游吧

相关标签: 微信小程序