干货,在uniapp项目中使用uni.navigateBack()方法返回上一页或多页时携带参数的方法!

这篇具有很好参考价值的文章主要介绍了干货,在uniapp项目中使用uni.navigateBack()方法返回上一页或多页时携带参数的方法!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在微信官方文档中有这么一个方法:getCurrentPages() getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误

在日常的实际项目开发中,你想从A页面返回到B页面并且带些参数的时候,例如选择收货地址或自提门店等场景时需要返回。那么此时你可以这样:文章来源地址https://www.toymoban.com/news/detail-523488.html

1.传递单个数据

let pages = getCurrentPages();  //获取所有页面栈实例列表
let nowPage = pages[ pages.length - 1];  //当前页页面实例
let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
prevPage.$vm.name= 1211;   //修改上一页data里面的name参数值为1211
uni.navigateBack({  //uni.navigateTo跳转的返回,默认1为返回上一级
	delta: 1
});

 

2. 在A页⾯需要传递参数的⽅法内

let pages = getCurrentPages(); // 当前页页⾯实例
let nowPage = pages[pages.length -1]; //当前页⾯实例
let prevPage = pages[pages.length -2]; // 上一页面实例
// 需要返回 上一页的数据 Object
let object ={
	name:'xufei',
	mobile :'1768396xxxx'
};

prevPage.$vm.prevDateFun(object) // 调用上一页 定义的方法

// 返回 上一页
uni.navigateBack({
  delta:1 // 可以不写,默认值为 1
})

 

B页⾯使⽤prevDateFun接受A页⾯的赋值 

<script>
export default{
	data() {
		return {
		    name :'',
		    mobile :''
		}
	},
	 methods:{
		let _this =this
		
		// 方法名,是 B页面 定义的方法名称
		prevDateFun(object) {
			if(object){
			     _this.name = object.name 
			     _this.mobile = object.mobile    
			}else{
				return
			}
		},
	}
</script>

到了这里,关于干货,在uniapp项目中使用uni.navigateBack()方法返回上一页或多页时携带参数的方法!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp使用navigateBack方法返回上级页面并刷新

    分析:一般调用 navigateBack 返回上一页时有两种情况 不需刷新:查看内容,状态未改变. 需刷新:在第二页编辑后,上一页列表中与之对应的数据状态一起改变 目前想出的方案是在回退之前修改上页判断条件,回退后重新获取判断条件在决定是否刷新。 示例: 详情页 修改状态成功后

    2024年02月03日
    浏览(40)
  • uniapp小程序路由跳转,使用uni.navigateBack方法,实现跳转传参

    由于小程序跳转限制10层,为了尽可能的减少页面栈,在小程序中会用到uni.navigateBack()方法,使用中难免会遇到页面跳转之间传参的问题。uni.navigateBack和uni.navigateTo、uni.redirectTo方式不同,不能通过路由拼接的方式传参,以下是三种跳转的方法: 在小程序中uni.navigateTo和u

    2024年02月16日
    浏览(61)
  • wx.navigateBack()函数返回上一页并传参

    wx.navigateBack()函数因为没有URL属性,所以不能像其他跳转路由的方式一样在url后面拼接参数,下面是官方文档给出的传参方式 官方文档给出的解释中,小程序是没办法用这个api进行传参的,但是 文档中写到:可以通过**getCurrentPages()**函数获取当前页面栈,获取到的页面栈数组

    2024年02月11日
    浏览(51)
  • uniapp返回上一页执行上一页方法

    在使用uniapp的过程中,我相信,我们都一定遇见过如下的场景: 进入了一个列表页,列表页进入详情页,在详情页进行了一些操作,比如,删除,修改,编辑,提交,成功之后返回到列表页,那么这个时候,如果我们的列表页不进行数据的刷新,就会给用户一种错觉,我刚才

    2024年02月16日
    浏览(38)
  • uniapp 之 uniapp 微信小程序项目,返回上一页,并刷新上一页的数据

    uniapp 微信小程序项目,在某个页面执行某个方法后返回上一页,并刷新上一页的数据 在用户列表页面点击新增按钮,跳转至新增用户页面,新增成功后返回用户列表页面,并在页面中刷新当前数据,要显示刚刚添加成功的那条数据 首先尝试直接用 uni.navigateTo 跳转回去,但是业务需求

    2024年02月11日
    浏览(93)
  • 微信小程序:navigateTo页面跳转与navigateBack返回上一页,并执行相关操作

     A页面:执行方法fn,跳转到B页面         跳转方法采用 wx.navigateTo ,跳转到新的页面,保留当前页面 B页面(路径为pages/test/test的页面): ①在某一方法中执行返回操作 wx.navigateBack({     delta: 1 }) ②刷新上一个页面 prevPage.onLoad(); ③调用上一个页面的设置值得方法  p

    2024年02月12日
    浏览(56)
  • uniapp微信小程序 页面返回使用navigateBack,返回后页面不刷新问题解决方案

    尝试了众多方法,比如vuex,本地缓存,都不行 1,如果是页面之间的跳转 可以使用onShow生命周期请求数据 2,组件之间的跳转,使用redirectTo,通过关闭当前页面,跳转到指定页面再加载,这种适合二级页面到三级页面数据不更新问题 3,当一级页面使用了某个组件,组件内跳转

    2024年02月15日
    浏览(59)
  • uni-app -移动端H5小程序 关闭当前页,返回上一页并调用上一页的方法

    👨‍💻 作者简介:程序员半夏 , 一名全栈程序员,擅长使用各种编程语言和框架,如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我! 🏆 本文收录于专栏: uniapp踩坑指南 🔥 专栏介绍

    2024年02月05日
    浏览(61)
  • uni-app:切换页面刷新,返回上一页刷新(onShow钩子函数的使用)

    切换页面刷新:通过onShow()便可实现 返回上一页通过uni.navigateBack({delta: 1});实现 以返回上一页刷新为例 在A页面写入方法refreshHandler() 在A页面写入onLoad(),onShow()  onLoad(): 首次进入页面时执行的方法,这里直接引入refreshHandler() 可以直接查询到页面数据 onShow(): 进入页面执行

    2024年02月15日
    浏览(65)
  • uni-app小程序uni.navigateBack返回上一个页面并传递参数.返回上个页面并刷新

    返回上一个打开的页面并传递一个参数。有种办法就是使用 假如从B页面返回A页面: 经过测试,在uni.app中使用B页面使用setData设置A页面参数无法实现(应该是被更改为常量属性了)。 打印console.log(prevPage)前一页面对象可得: 方法1:我们可以使用A页面原有方法 B页面传递:

    2024年02月16日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包