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

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

一、使用 scroll-view 组件保存滚动位置：

1. 在 wxml 文件中，使用 scroll-view 组件包裹需要滚动的内容。
2. 在 data 中定义一个变量来存储 scroll-view 的 scroll-top 属性值。
3. 在 scroll-view 的 bindscroll 事件中，实时更新存储的 scroll-top 值。
4. 当再次进入页面时，将存储的 scroll-top 值设置到 scroll-view 的 scroll-top 属性上。

二、使用页面栈保存页面信息：

1. 在 onHide 或 onUnload 生命周期函数中，将当前页面的滚动位置等信息存储到 getCurrentPages 获取的页面栈中。
2. 在 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 的位置。

你可以根据自己的需求选择使用 scroll-view 组件保存滚动位置的方法，或者使用页面栈存储页面信息的方法，也可以将两者结合使用，以达到更好的效果。在实际开发中，还可以考虑存储更多页面状态信息，如输入框的内容、复选框的选中状态等，以确保用户再次进入页面时能恢复到之前的状态。

请确保代码中的元素选择器和存储逻辑符合你的实际情况，对于 scroll-view 组件，要注意其 scroll-top 属性的使用和更新，对于页面栈方法，要注意页面栈的结构和信息存储的准确性。