【微信小程序】返回上一页刷新或当前页刷新

bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!
造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。
解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!

页面的刷新,不管是H5还是APP或者其他浏览器之类的,都有相应的刷新函数或者方法,所以,微信小程序也有一些简单的刷新方法,可供参考。

HTML实现当前页面刷新

首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢?
1,reload()方法刷新当前页面;
2,replace() 方法刷新当前页面;
3,页面自动刷新当前页面;
三种实现js 刷新当前页面的方法用法

微信小程序

1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序----页面生命周期
2,可以知道微信小程序的页面是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onHide(页面隐藏)、onUnload(页面卸载)五个周期构成;
3,知道了页面的生命周期,如何实现返回刷新和当前页刷新呢?又在什么场景需要页面刷新效果呢?

当前页面刷新

/**
 * 刷新页面,页面设置点击刷新事件
 */
onRefresh: function() {
  this.onLoad()
  this.onReady()
}

注意:如果onLoad函数中有其他页面传过来的参数,建议放setData中,以免刷新的时候获取不到值的情况出现,一般不会遗失参数的!

返回上一页刷新

充分利用页面隐藏和显现的函数

/**
 * 生命周期函数--监听页面显示
 */
onShow: function() {
	// 当返回当前页面的时候,会自动调用这个参数,则实现自动返回刷新
	this.onLoad()
    this.onReady()
},
/**
 * 生命周期函数--监听页面隐藏
 */
onHide: function() {
	// 此函数是当前页面隐藏挑战到其他页面的隐含函数,可以设置全局变量之类
	app.globalData.NetWorkType = true;
},

这两种刷新页面的方法各有利弊,如果不想单独在onShow中实现返回自动刷新,可以根据自定义的全局变量来管控。

微信小程序要实现页面刷新,简单的说就是在不同的地方执行onLoad周期函数。不过需要注意在刷新时是否需要初始化变量,这个必须注意。

微信小程序-下拉刷新(onPullDownRefresh)

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function() {
	// 在此方法中实现数据加载的逻辑
}

//此方法需要在当前页面的json中设置如下参数,开启下拉刷新
{
  "enablePullDownRefresh": true
}

此种方法刷新,并不会重新加载页面,或者刷新数据,需要手动调用onLoad函数或加载数据函数,重新动态载入数据。

供参考!

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序有多种方法可以返回一页面。其中一种方法是使用wx.navigateBack()函数。这个函数可以返回到小程序页面栈中的上一个页面。你可以通过设置delta参数来指定返回页面数。例如,如果你想返回上一个页面,可以将delta设置为1。\[2\] 另一种方法是使用wx.redirectTo()函数。这个函数可以关闭当前页面,并跳转到应用内的另一个页面。跳转后,左上角会出现返回小箭头,点击后可以返回原本页面。但是需要注意的是,这个函数不能跳转到tabbar页面。\[1\] 还有一种方法是使用wx.navigateTo()函数。这个函数可以在保留当前页面的情况下,跳转到应用内的另一个页面。跳转后,左上角也会出现返回小箭头,点击后可以返回原本页面。\[3\] 总结起来,微信小程序返回一页面的方法包括使用wx.navigateBack()、wx.redirectTo()和wx.navigateTo()函数。具体使用哪种方法取决于你的需求和场景。 #### 引用[.reference_title] - *1* *3* [微信小程序返回一页的各种方法](https://blog.csdn.net/ARLENE2/article/details/129437624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [微信小程序返回上一级页面并自动刷新数据](https://blog.csdn.net/qq_42740298/article/details/128326542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值