【uni】 编辑后返回原来页面，数据也改变，还跳到原来的位置

使用场景： A页面有多条数据，点击其中一条修改 跳转到 B页面，在B页面编辑成功后，重新返回到A页面，这时，A页面的数据被修改了的同时页面还滚到到修改之前的位置

编辑器 hbuilder，编译成 微信小程序，vue 框架
1

A页面

B页面

其中用到了 
onPageScroll 监听页面滚动，
uni.pageScrollTo（）页面滚动到指定位置，
getCurrentPages获取页面栈实例，
uni.navigateBack 返回页面数
1
2
3
4
5

上代码 首先 A 页面

<script>
	export default {
		data() {
			return {
				list: [], // 数据列表
				paging: { // 分页
					page: 1, // 页数 
					limit: 10, // 显示个数（默认10，最大9999）
					total: 100 // 总数
				},
				scrollTop: '', // 滚动距离
				isback: false, // 是否是返回页， B页面在返回时，更改A页面 data里的isback 属性，true 是返回页 false 不是
				top: '', // 返回时距离顶部
			}
		},
		onShow() {
			// 编辑后返回，数据重新渲染并且直接跳转到编辑数据的位置
				if (this.isback) {
				let that = this;
				let data = {}
				if (uni.getStorageSync('onPageScroll')) {
					data = JSON.parse(uni.getStorageSync('onPageScroll'));
				} else {
					data = {
						page: 1,
						scrollTop: 0,
					}
				}
				this.list = [];
				this.top = data.scrollTop;
				this.paging.page = 1;
				this.operaData();
			}
		},
	
		// 监听页面滚动
		onPageScroll(e) {
			if (!this.isback) {
				let PageScroll = {
					page: this.paging.page,
					scrollTop: e.scrollTop
				}
				uni.setStorageSync('onPageScroll', JSON.stringify(PageScroll))
			}
		},
		// 方法集合
		methods: {
			// 编辑获取数据 操作后
			async operaData() {
				await this.chooseFun();
			},
			// 获取数据
			async chooseFun() {
				let that = this;
				let params = {
					page: this.paging.page,
					limit: this.paging.limit
				}
				params = {
					...params,
					...this.form
				}
				// 获取数据 方法，不用管，改成自己项目的 调接口 方法
				instoregoodsGet(params).then(res => {
					this.paging.total = res.data.total;
					if (res.data.data.length != 0) {
						this.list.push(...res.data.data);
					}
					// this.list = this.list.concat(res.data.data);
					
					// 重点，编辑成功后返回到A页面，再调用
					if (that.isback) {
						var timer = setTimeout(() => {
							let data = {}
							if (uni.getStorageSync('onPageScroll')) {
								data = JSON.parse(uni.getStorageSync('onPageScroll'))
							} else {
								data = {
									page: 1,
									scrollTop: 0
								}
							}

							if (this.paging.page >= data.page) {
								uni.pageScrollTo({
									duration: 0,
									scrollTop: that.top,
									success: function() {}
								})
								clearTimeout(timer);
								that.isback = false;
								uni.setStorageSync('onPageScroll', '');
								
							} else {
								that.paging.page++;
								that.isback = true;
								return this.chooseFun(this.paging.page);
							}
						})
					}
					
				})
			},
				// 触底加载
			onReachBottom() {
				if (this.isback && uni.getStorageSync('onPageScroll')) {
					return;
				} else {
					if (this.list.length < this.paging.total) {
						this.paging.page++
						this.chooseFun()
					}
				}
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

接下来B页面

<script>
	export default {
		// 方法集合
		methods: {
			// 编辑 保存
			saveData(params) {
			
				setTimeout(function() {
					// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
					let pages = getCurrentPages();
					// 2. 上一页面实例
					// 注意是length长度，所以要想得到上一页面的实例需要 -2
					// 若要返回上上页面的实例就 -3，以此类推
					let prevPage = pages[pages.length - 2];
					// 3. 给上一页面实例绑定A页面 data里的 isback 属性 （注意是$vm）
					prevPage.$vm.isback = true;
					
					uni.navigateBack({
						delta: 1 // 返回的页面数
					})
				}, 300);
			})
		
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26