uni-app中onBackPress()监听页面返回(更新数据)

 更新时间:2023年10月31日 08:54:51   作者:假装是个web狗  
这篇文章主要给大家介绍了关于uni-app中onBackPress()监听页面返回(更新数据)的相关资料,在UniApp中,可以通过监听页面刷新的生命周期函数来监听页面的返回,然后重新调用接口进行刷新,需要的朋友可以参考下

生命周期 - onBackPress() 监听页面返回

函数名说明平台差异说明
onBackPress监听页面返回 ,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。app、H5、支付宝小程序
  • 基础用法 :注意 返回值 options
onBackPress(options) {
	/**
	 * 由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。
	 * 此时,需要根据 onBackPress 的回调对象中的 from 值来做处理,当来源是 'navigateBack' 时,返回 false。
	*/
	if (options.from === 'navigateBack') {
		return false;
	}
}

返回刷新数据

  • 本级页面: 例如详情页
// 返回上一页刷新页面数据
// <!-- 返回方法  -->
onBackPress(options) {
	/**
	 * 由于 uni.navigateBack() 同样会触发 onBackPress 函数。
	 * 因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。
	 * 此时,需要根据onBackPress的回调对象中的from值来做处理,当来源是'navigateBack'时,返回 false 。
	*/
	console.log("----------onBackPress---------", options)
	if (options.from === 'navigateBack') {
		return false;
	}
	this.back();
	return true;
},
methods: {
	back() {
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		let nowPage = pages[pages.length - 1]; //当前页页面实例
		let prevPage = pages[pages.length - 2]; //上一页页面实例
		console.log(prevPage)
		// 1. 改变值-在上一个页面 onShow 刷新数据
		prevPage.isRefresh = true   //修改上一页data里面的参数值为true
		uni.navigateBack({ //uni.navigateTo跳转的返回,默认1为返回上一级
			delta: 1
		});
		// 2. 也可以直接调用方法-成功返回后,用$vm.调用上一个页面的方法名,进行页面刷新
		uni.navigateBack({ //uni.navigateTo跳转的返回,默认1为返回上一级
			delta: 1,
			success:(event)=>{
				prevPage.$vm.getData();  // getData 是自己对应的方法名
			}
		});
	}
}
  • 上级页面: 例如列表页
export default{
	data(){
		return{
    		isRefresh:false
		}
	},
	// 上一个页面onShow
	onShow() {
		console.log('onShow')
		// this.h = uni.getSystemInfoSync().windowHeight - 135;
		// 返回刷新
		// 如果是提交状态返回isRefresh=1,才刷新页面
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];
		if (currPage.isRefresh) {
			// 重新获取数据
			console.log("重新获取数据",this.isRefresh)
			// this.getData() // 获取列表数据
			// 每一次需要清除,否则会参数会缓存
			currPage.isRefresh = false
		}
		console.log(this.isRefresh)
	},
}

总结 

到此这篇关于uni-app中onBackPress()监听页面返回(更新数据)的文章就介绍到这了,更多相关uni-app onBackPress()监听页面返回内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序修改swiper默认指示器样式的实例代码

    微信小程序修改swiper默认指示器样式的实例代码

    这篇文章主要介绍了微信小程序修改swiper默认指示器样式的实例代码,代码块是从微信开发文档中心复制的代码块,在此基础上修改官方swiper样式,需要的朋友可以参考下
    2018-07-07
  • 支付宝小程序tabbar底部导航

    支付宝小程序tabbar底部导航

    这篇文章主要为大家详细介绍了支付宝小程序重写tabbar底部导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • npm安装依赖时出现Peer Dependencies冲突报错解决分析

    npm安装依赖时出现Peer Dependencies冲突报错解决分析

    这篇文章主要为大家介绍了npm安装依赖时出现Peer Dependencies冲突报错解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JavaScript实现格式化字符串函数String.format

    JavaScript实现格式化字符串函数String.format

    本文主要介绍了JavaScript实现格式化字符串函数String.format(可自动解析引号转义字符)。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 前端的框架TDesign小程序组件库体验

    前端的框架TDesign小程序组件库体验

    TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,下面这篇文章主要给大家介绍了关于前端的框架TDesign小程序组件库体验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JS面试之手写节流防抖详解

    JS面试之手写节流防抖详解

    作为一个程序员,代码实现才是能力体现,在大部分面试的时候,我们都会被要求手写代码实现一个功能,本文总结了一下经常被面试官问到的节流和防抖功能的实现,分享给有需要的小伙伴
    2023-07-07
  • 如何通过JS实现转码与解码

    如何通过JS实现转码与解码

    这篇文章主要介绍了如何通过JS实现转码与解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 基于Bootstrap的Java开发问题汇总(Spring MVC)

    基于Bootstrap的Java开发问题汇总(Spring MVC)

    这篇文章主要为大家汇总了基于Bootstrap的Java开发问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 不得不知的ES6小技巧

    不得不知的ES6小技巧

    ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些,希望它们对你有用
    2018-07-07
  • JavaScript判断微信浏览器实例代码

    JavaScript判断微信浏览器实例代码

    本文给大家介绍如何判断用户是否是用微信浏览器的实例代码,根据关键字 MicroMessenger 来判断是否是微信内置的浏览器,感兴趣的朋友可以参考下实现代码
    2016-06-06

最新评论