相信很多微信小程序的开发者都会碰到这样的问题，那今天我们就来详细的看下如何解决
一、使用 scroll-view 组件保存滚动位置：
- 在
wxml文件中，使用scroll-view组件包裹需要滚动的内容。 - 在
data中定义一个变量来存储scroll-view的scroll-top属性值。 - 在
scroll-view的bindscroll事件中，实时更新存储的scroll-top值。 - 当再次进入页面时，将存储的
scroll-top值设置到scroll-view的scroll-top属性上。
二、使用页面栈保存页面信息：
- 在
onHide或onUnload生命周期函数中，将当前页面的滚动位置等信息存储到getCurrentPages获取的页面栈中。 - 在
onShow生命周期函数中，从页面栈中取出存储的信息，并恢复滚动位置等状态。
以下是一个使用 scroll-view 组件的具体实现示例：
wxml 文件：
xml
<scroll-view scroll-y="true" bindscroll="onScroll" scroll-top="{{scrollTop}}">
<!-- 这里放置你的页面内容 -->
<view wx:for="{{list}}" wx:key="index">{{item}}</view>
</scroll-view>js 文件：
javascript
Page({
data: {
scrollTop: 0, // 存储 scroll-view 的 scroll-top 属性值
list: [] // 假设这是页面中的列表数据
},
onLoad: function() {
// 模拟生成一些列表数据
let tempList = [];
for (let i = 0; i < 100; i++) {
tempList.push(`Item ${i}`);
}
this.setData({
list: tempList
});
},
onScroll: function(event) {
// 当 scroll-view 滚动时，更新 scrollTop 的值
this.setData({
scrollTop: event.detail.scrollTop
});
},
onHide: function() {
// 页面隐藏时，可以将 scrollTop 的值存储到本地缓存或全局数据中
// 这里仅存储在页面数据中，实际开发可根据需求存储在更合适的地方
// 例如：wx.setStorageSync('pageScrollTop', this.data.scrollTop);
},
onShow: function() {
// 页面显示时，将存储的 scrollTop 值取出并设置到 scroll-view 上
// 例如：let storedScrollTop = wx.getStorageSync('pageScrollTop');
// 这里仅从页面数据中取出，假设之前存储在页面数据中
let storedScrollTop = this.data.scrollTop;
if (storedScrollTop) {
this.setData({
scrollTop: storedScrollTop
});
}
}
});代码解释：
wxml部分 ：<scroll-view>组件设置了scroll-y="true"表示允许垂直滚动，bindscroll="onScroll"绑定了滚动事件，scroll-top="{``{scrollTop}}"用于设置和获取滚动条的垂直位置。- 内部的
<view wx:for="{``{list}}" wx:key="index">{``{item}}</view>是一个简单的列表，用于演示滚动内容。
js部分 ：onLoad函数：模拟生成一个包含 100 个元素的列表数据，并更新到data中的list属性。onScroll函数：当scroll-view滚动时，会触发该函数，将滚动的scrollTop值更新到data中的scrollTop属性，实现实时存储滚动位置。onHide函数：当页面隐藏时，可将scrollTop值存储到更稳定的存储位置，如本地缓存wx.setStorageSync，这里为简单起见，只是在页面数据中存储。onShow函数：当页面再次显示时，从存储位置（这里从页面数据中）取出存储的scrollTop值，并设置到scroll-view的scroll-top属性，以恢复滚动位置。
使用页面栈的方法如下：
js 文件：
javascript
Page({
data: {
list: [] // 假设这是页面中的列表数据
},
onLoad: function() {
// 模拟生成一些列表数据
let tempList = [];
for (let i = 0; i < 100; i++) {
tempList.push(`Item ${i}`);
}
this.setData({
list: tempList
});
},
onHide: function() {
let pages = getCurrentPages();
let currentPage = pages[pages.length - 1];
// 将当前页面的 scrollTop 等信息存储在页面栈的当前页面数据中
currentPage.scrollTop = wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => {
currentPage.scrollTop = rect.top;
}).exec();
},
onShow: function() {
let pages = getCurrentPages();
let currentPage = pages[pages.length - 1];
if (currentPage.scrollTop) {
wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => {
rect.top = currentPage.scrollTop;
this.setData({
scrollTop: currentPage.scrollTop
});
}).exec();
}
}
});代码解释：
onLoad函数：模拟生成列表数据并更新到data中。onHide函数：- 使用
getCurrentPages()获取页面栈。 - 获取当前页面，将滚动位置等信息存储在当前页面对象中。
- 使用
wx.createSelectorQuery().select('.scroll-view').boundingClientRect()来获取scroll-view的位置信息，这里假设scroll-view的类名为scroll-view，可根据实际情况修改。
- 使用
onShow函数：- 再次获取页面栈和当前页面。
- 如果之前存储了
scrollTop值，使用wx.createSelectorQuery()来恢复scroll-view的位置。
你可以根据自己的需求选择使用 scroll-view 组件保存滚动位置的方法，或者使用页面栈存储页面信息的方法，也可以将两者结合使用，以达到更好的效果。在实际开发中，还可以考虑存储更多页面状态信息，如输入框的内容、复选框的选中状态等，以确保用户再次进入页面时能恢复到之前的状态。
请确保代码中的元素选择器和存储逻辑符合你的实际情况，对于 scroll-view 组件，要注意其 scroll-top 属性的使用和更新，对于页面栈方法，要注意页面栈的结构和信息存储的准确性。