相信很多微信小程序的开发者都会碰到这样的问题,那今天我们就来详细的看下如何解决
一、使用 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