uni——页面栈,刷新上个页面的列表

案例说明

一般新增后或者编辑后,刷新上个页面数据

setTimeout(() => {
    
    
	this.$common.prePage().list = []
	this.$common.prePage().getList()
	this.$common.back(1)
}, 1200);

prePage()方法封装:

const prePage = () => {
    
    
	let pages = getCurrentPages();
	let prePage = pages[pages.length - 2];
	// #ifdef H5
	return prePage;
	// #endif
	return prePage.$vm;
}

二、页面通讯

通过uni页面生命周期函数和事件通知机制,实现在新增数据后刷新上一个页面的列表。

假设您是从list页面跳转到add页面进行数据新增,下面是一个示例代码:

在add页面js文件中,使用uni.$emit触发refreshList事件,将新增的数据传递给list页面:
// add.vue
// 假设成功新增数据后返回了一个obj对象,包含新增数据的信息
this.$http.post('/api/addData', formData).then((res) => {
    
    
  let obj = res.data
  // 触发事件refreshList,将obj作为参数传递给list页面
  uni.$emit('refreshList')
}).catch((err) =>{
    
    
  console.log(err)
})
在list页面mounted函数中,使用uni.$on监听refreshList事件,接收新增数据,并调用相应的获取数据列表的方法重新渲染列表:
// list.vue
mounted() {
    
    
  // 监听refreshList事件
  uni.$on('refreshList', () =>{
    
    
    // 调用获取数据列表的方法重新渲染列表
    this.getDataList()
  })
},

methods: {
    
    
  getDataList(){
    
    
    // 执行获取数据列表的逻辑
    // ...
  }
}

猜你喜欢

转载自blog.csdn.net/xulihua_75/article/details/130316659
今日推荐