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

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

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

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

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

  1. onHideonUnload 生命周期函数中,将当前页面的滚动位置等信息存储到 getCurrentPages 获取的页面栈中。
  2. 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-viewscroll-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 属性的使用和更新,对于页面栈方法,要注意页面栈的结构和信息存储的准确性。

相关推荐
27669582921 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir2 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa3 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe3 小时前
微信小程序唤起app
微信小程序·小程序
不老刘4 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
橘猫云计算机设计5 小时前
基于springboot微信小程序的旅游攻略系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·微信小程序·毕业设计·旅游
Mr.Liu65 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳15 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域16 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源