使用场景: A页面有多条数据,点击其中一条修改 跳转到 B页面,在B页面编辑成功后,重新返回到A页面,这时,A页面的数据被修改了的同时页面还滚到到修改之前的位置
编辑器 hbuilder,编译成 微信小程序,vue 框架
A页面
B页面
其中用到了
onPageScroll 监听页面滚动,
uni.pageScrollTo()页面滚动到指定位置,
getCurrentPages获取页面栈实例,
uni.navigateBack 返回页面数
上代码 首先 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>
接下来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>