uniapp使用navigateBack方法返回上级页面并刷新的简单示例

 更新时间:2023年03月28日 09:47:29   作者:今后刚睡醒  
最近写uniapp项目的时候发现有时候需要更新页面数据,所以下面这篇文章主要给大家介绍了关于uniapp使用navigateBack方法返回上级页面并刷新的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

分析:一般调用navigateBack返回上一页时有两种情况

  • 不需刷新:查看内容,状态未改变.
  • 需刷新:在第二页编辑后,上一页列表中与之对应的数据状态一起改变

目前想出的方案是在回退之前修改上页判断条件,回退后重新获取判断条件在决定是否刷新。

示例:

详情页

修改状态成功后,准备回退到上一页之前,将上一页的是否刷新参数值改为是的状态

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];//上一个页面
//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
	 isRefresh: 1 
})
// 再根据需求,确定返回上一页面
wx.navigateBack({
	delta: 1
})

列表页

需要在onshow钩子中获取判断条件

export default{
	data(){
		return{
    		isRefresh:false
		}
	},
	onShow(){  
		// 如果是提交状态返回isRefresh=1,才刷新页面,从详情过来无需刷新
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];
		if(currPage.__data__.isRefresh){
			// 重新获取数据
			this.getData(true)//获取列表数据
			// 每一次需要清除,否则会参数会缓存
        	currPage.__data__.isRefresh=false
		}
	}
}

附:uniapp刷新页面后使用uni.navigateBack()无法返回上个页面

最近写uniapp项目的时候发现有时候需要更新页面数据,我是用h5强制刷新页面后就无法返回上一个页面,查了文档后发现是页面栈丢失问题。百度看了很多大佬们的方法,方法基本一致,使用原生JS的history对象,封装一个兼容uniapp api和原生js的返回的方法。在此记录一下

方法

let canNavBack = getCurrentPages()
if( canNavBack && canNavBack.length>1) {  
    uni.navigateBack() 
} else {  
    history.back();  
} 
//在返回的方法里替换

总结

到此这篇关于uniapp使用navigateBack方法返回上级页面并刷新的文章就介绍到这了,更多相关uniapp用navigateBack返回上一页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现九宫格拼图小游戏

    js实现九宫格拼图小游戏

    本文主要分享了js实现九宫格拼图小游戏的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • window.open被浏览器拦截后的自定义提示效果代码

    window.open被浏览器拦截后的自定义提示效果代码

    window.open被浏览器拦截后的自定义提示效果代码...
    2007-11-11
  • js内存泄露的几种情况详细探讨

    js内存泄露的几种情况详细探讨

    内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束,由于浏览器垃圾回收方法有bug,会产生内存泄露,下面与大家详细探讨下内存泄露的几种情况
    2013-05-05
  • JavaScript 数组中最大最小值

    JavaScript 数组中最大最小值

    本文给大家汇总介绍的是获取JavaScript 数组中最大最小值的方法和示例,非常的详细和全面,希望对大家学习JavaScript能够有所帮助
    2016-06-06
  • JS中eval函数的使用示例

    JS中eval函数的使用示例

    eval函数会将 obj 当做代码去执行一遍,下面举个例子为大家详细介绍下具体的使用方法,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • js去空格技巧分别去字符串前后、左右空格

    js去空格技巧分别去字符串前后、左右空格

    js去空格想必大家多少都会点吧,在接下来的文章中为大家详细介绍下如何分别去字符串前后,左边,右边空格,感兴趣的朋友可以参考下
    2013-10-10
  • javascript中的 onchange事件详解

    javascript中的 onchange事件详解

    onchange 事件会在域的内容改变时发生,可用于单选框与复选框改变后触发的事件,本文通过示例代码介绍javascript中的 onchange事件,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • uniapp开发微信小程序主包太大和vendor.js过大无法打包问题解决

    uniapp开发微信小程序主包太大和vendor.js过大无法打包问题解决

    最近工作一直在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,这篇文章主要给大家介绍了关于uniapp开发微信小程序主包太大和vendor.js过大无法打包问题的解决办法,需要的朋友可以参考下
    2023-11-11
  • FF IE兼容性的修改小结

    FF IE兼容性的修改小结

    FF IE兼容性的修改小结,大家以后在javascript的编写过程中需要注意下。
    2009-09-09
  • JavaScript中不可忽略的Symbol的盘点

    JavaScript中不可忽略的Symbol的盘点

    Symbol类型的出现,为每个属性赋予了独一无二的标识符,无论项目多么复杂,Symbol都能确保属性键的绝对唯一性,下面我们就来看看JavaScript中那些不可忽略的Symbol吧
    2024-12-12

最新评论