uniapp列表到编辑或新增页面，返回后刷新列表

最新推荐文章于 2025-09-06 10:09:18 发布

原创最新推荐文章于 2025-09-06 10:09:18 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

这篇博客介绍了如何在前端应用中监听并处理数据的新增操作。通过`uni.navigateTo`和`uni.navigateBack`实现页面间的跳转，同时利用`events`和`getOpenerEventChannel().emit`确保在新增数据成功后能够及时刷新列表页面的数据，确保用户体验的流畅性。

列表页放置监听

fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}

编辑或新增页处理成功后，刷新列表

/**
 * 提交表单
 */
submitForm(value) {
	// 使用 clientDB 提交数据
	return db.collection(dbCollectionName).add(value).then((res) => {
		uni.showToast({
			icon: 'none',
			title: '新增成功'
		})
		this.getOpenerEventChannel().emit('refreshData')
		setTimeout(() => uni.navigateBack(), 500)
	}).catch((err) => {
		uni.showModal({
			content: err.message || '请求服务失败',
			showCancel: false
		})
	})
}

重要的是

events: {
	// 监听新增数据成功后, 刷新当前页面数据
	refreshData: () => {
		this.$refs.udb.loadData({
			clear: true
		})
	}
}

和

	this.getOpenerEventChannel().emit('refreshData')
	setTimeout(() => uni.navigateBack(), 500)