微信小程序：中途退出原页面，再次进入无法回到退出时的位置

相信很多小程序>微信小程序的开发者都会碰到这样的问题，那今天我们就来详细的看下如何解决

一、使用 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 文件：

<scroll-view scroll-y="true" bindscroll="onScroll" scroll-top="{{scrollTop}}"><!-- 这里放置你的页面内容 --><view wx:for="{{list}}" wx:key="index">{{item}}</view>
</scroll-view>

js 文件：

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 文件：

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 的位置。