优先推荐方法三
图示:
从新建线索页面A跳转到选择线索页面B,然后选择相应线索之后再返回新建线索页面,且原来的表单数据不能丢失
方法一:使用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文章来源:https://www.toymoban.com/news/detail-558554.html
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模板网!