当前位置：首页 > article >正文

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

article 2025/2/28 20:21:52

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

一、使用 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 的位置。