uniapp、小程序选择数据后携带数据返回上一页且不刷新页面

这篇具有很好参考价值的文章主要介绍了uniapp、小程序选择数据后携带数据返回上一页且不刷新页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

优先推荐方法三

图示:

从新建线索页面A跳转到选择线索页面B,然后选择相应线索之后再返回新建线索页面,且原来的表单数据不能丢失

uni返回上一页不刷新,uni-app,前端uni返回上一页不刷新,uni-app,前端

方法一:使用uni.$emit

 利用这个方法可以往uni这个对象身上添加自定义事件,然后通过uni.$on方法在生命周期onShow里面去触发事件,通过触发的事件的参数去拿到值并做相应的修改。

此处需要注意一定得在onShow里面写,还有就是新建页面跳转到选择页面得用uni.navigateTo,这样才不会关闭当前页面

缺点:如果当前点击跳转的元素是组件处理起来就比较麻烦,因为组件是没有onshow生命周期的所以就没法触发事件。

当然也有解决办法,比如给组件绑定一个值在页面onshow去修改这个值,然后在组件里面监听这个值的变化去修改组件内的响应数据,或者在页面onshow使用this.$refs去直接调用组件内的方法并把需要修改的值return过去

代码示例:

表单页面A

此处由于业务需要我跳转到选择数据的页面也携带了参数(可以在这些参数里添加返回当前页面需要修改值的位置,比如{key:'form.name'}),这样有多个需要选择值的时候就可以自动根据这个参数去赋值了

uni.navigateTo({
					url: `/CRM/pages/common/select-data-list?item=${encodeURIComponent(JSON.stringify(params))}`,
				})
			},
	onShow() {
			// 移除全局自定义事件监听器
			uni.$off('saveSelect');
			// 监听全局的自定义事件
			uni.$on('saveSelect', data => {
				console.log(data)
			})
		},

 页面b:

选择数据的页面

	uni.$emit('saveSelect',item)
				uni.navigateBack({
					delta: 1
				})

方法二:利用getCurrentPages()方法

getCurrentPages()方法是一个内置的函数,getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。所以我们可以利用数组长度减去2就可以得到上一个页面获取到上一个页面的实例,然后获取到实例了一切都好说了,直接修改相应数据就行了

代码示例:

表单页面A

uni.navigateTo({
					url: `/CRM/pages/common/select-data-list?item=${encodeURIComponent(JSON.stringify(params))}`,
				})

选择数据页面B

	const pages = getCurrentPages()//获取所有实例
				const previousPageS = pages[pages.length-2]//当前页面的上一个页面
				previousPageS.$vm.formData.source = 'oioio'//直接修改上个页面数据
				uni.navigateBack({
					delta: 1
				})

方法三:运用uni.navigateTo自带的参数events(推荐:这个也是官方的方法用起来也方便)

页面A

	jump(){
				uni.navigateTo({
				  url: '/pages/test/detail',
				  events: {
				    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
				    acceptDataFromOpenedPage: (data)=> {
				      console.log(data)
							当跳转后的页面触发此事件即可传递参数过来,此时就可以修改页面其他所有相修改的数据了
							this.name = data.data
				    },
				  },
				  success: (res) =>{
				    // 通过eventChannel向被打开页面传送数据
				    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
				  }
				})
			}

页面B文章来源地址https://www.toymoban.com/news/detail-558554.html

edit(){
				// this.getOpenerEventChannel()是uni自带的一个方法,返回一个对象
				const eventChannel = this.getOpenerEventChannel();
				// 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
				 eventChannel.emit('acceptDataFromOpenedPage', {data: 'rose'});
				 // 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
				 uni.navigateBack({
				 	delta: 1
				 });
			}

到了这里,关于uniapp、小程序选择数据后携带数据返回上一页且不刷新页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Uni-app返回上一页面并携带参数

    目录 一、前言 二、实现方法 三、遇到的坑 四、事件详解 一、前言         需要实现这么一个需求:在一个列表页面,当子页面直接返回时,不刷新列表页面。但是当子页面的数据有变动时,需要刷新列表页面。本篇博客记录一下我是如何解决这个问题的。        

    2024年02月08日
    浏览(34)
  • uniapp 返回上一页并刷新数据【已解决】

    业务逻辑:有许多页面需要判断是否登陆,没有登陆的话需要跳转到登陆页面,登陆成功后需要返回上一级并且刷新上一级页面数据。 大概效果是这样 下面实操 1,新建一个方法 beforePage.$vm.reFresh(); reFresh();是监听上一个页面的方法 2,在登陆成功的时候执行该方法 我这里是

    2024年02月11日
    浏览(31)
  • 微信小程序 表单 选择跳转新页面,选择后,返回上一页面保留原页面已填写的值

    场景: 表单页有很多项需要填写,个别项数据较多,需要跳转到新的页面去选择后,带着结果返回。如图。 此时,想要返回时,已经填写过的内容保留不变,不被清空。 解决: 在下一页去获取上一页data中的数据,并修改,再通过 wx.navigateBack({ delta: 1, }) 返回上一页,页面不

    2024年02月12日
    浏览(29)
  • uniapp小程序路由跳转,使用uni.navigateBack方法,实现页面返回上一页

    在小程序中uni.navigateTo和uni.redirectTo是通过路由拼接的方式传参 uni.navigateBack() 是一个用于在uni-app中进行页面后退操作的API。它可以让你返回到上一个页面。在给定的示例中,uni.navigateBack() 被调用并传入了一个对象作为参数。该对象具有一个属性 delta,用于指定要后退的页面

    2024年04月28日
    浏览(30)
  • vue/uniapp - 返回上一页并onLoad/onShow刷新数据列表接口

    在uni中,返回页面是不会触发 onLoad 方法的; 如果我们只想在特定情况下返回上一页才需要刷新数据,那么用 onShow 的话,那刷新就太频繁了; 这时候,可以用 $emit 和 $on 去解决。 比如说,从详情页(detail.vue) 回到 列表页(list.vue): 进入的页面 给大佬暴赞👍👍👍👍👍👍

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

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

    2024年02月16日
    浏览(26)
  • 微信小程序返回上一页面并更新的数据

    微信小程序开发过程中经常把当前页面数据传递给上一个页面,wx.navigateBack()返回上一页,无法传递数据,页面视图没有响应。其中一个办法就是巧妙利用页面栈。 getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素

    2024年02月11日
    浏览(43)
  • uniapp 返回上一页并刷新

    如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息,点击保存后跳转到个人中心(/pages/mine/index)页面并刷新更新数据 点击保存按钮时执行以下代码:

    2024年02月14日
    浏览(32)
  • uniapp返回上一页并刷新

    在uniapp中,经常会有返回上一页的情况,官方提供有 uni.navigateBack 这个api来实现效果,但是此方法返回到上一页之后页面并不会更新(刷新)。 例如有这样一个场景:从地址列表页点击添加按钮进入添加地址页面,添加完地址之后点击确认后再次跳入地址列表页并要更新地址

    2024年02月11日
    浏览(38)
  • uniapp H5 navigateBack无法返回上一层级

    项目场景: 提交表单后需要返回上一级 原因分析: H5在PC端打开,当前页面重新加载的情况下,出现navigateBack不能返回,由于H5端页面刷新后返回页面栈会消失

    2024年02月08日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包