从详情页返回列表页记住滚动条位置

需求,从blog列表展示页进入单条blog详情页后返回不刷新,并且保留滚动条的位置。

1.返回不刷新使用keepAlive。(多级路由/菜单会导致keepAlive失效)

$route(to, from){
            if (to.meta.keepAlive){
                !this.include.includes(to.meta.name)&&this.include.push(to.meta.name);
            }
            if (from.meta.keepAlive && to.meta.deepth < from.meta.keepAlive){
                //清空from缓存,除了首页以外
                if (from.name === 'home'){
                    return ;
                }
                let index = this.include.indexOf(from.meta.name);
                index !== -1 && this.include.splice(index, 1);
            }
            if(to.meta.name&&to.meta.name.indexOf('handle')!=-1){//解决进入操作页返回不刷新问题
                this.include = []
            }
        }

2.在离开当前页面时获取当前滚动条高度。因为设置了keepAlive,所以可以在data中设置一个变量存储。

(ref加在产生滚动的那个容器上)

3.返回当前页面时在activated周期中设置保存的高度。

activated() {
        this.$refs.wrapper.scrollTop = this.scrollTop;
    },

 

### 解决 UniApp 中列表与详情页之间跳转后返回时刷新并定位当前位置 在处理从列表页跳转至详情页返回的情况时,为了保持用户体验的一致性和流畅度,需确保返回列表页时不丢失之前的滚动位置,并能正常刷新页面获取最新数据。 #### 使用 `onShow` 生命周期钩子实现页面刷新 对于 UniApp 应用,在页面组件中可以通过监听 `onShow` 生命周期函数来实现在每次显示该页面时执行特定逻辑。这有助于确保每当用户回到列表页时都能重新加载最新的数据[^2]: ```javascript export default { onShow() { this.reqTaskList(); }, methods: { async reqTaskList() { try { let res = await uni.request({ url: 'your_api_endpoint', method: 'GET' }); this.taskList = res.data; } catch (error) { console.error('Failed to fetch task list:', error); } } } } ``` #### 记住滚动条位置 为了让用户能够继续浏览之前查看的内容部分而不必每次都从头开始,可以在离开当前页面前往其他页面前保存当前的滚动高度;当再次进入页面时恢复这个值。具体做法如下所示[^1]: ##### 修改 App.vue 或者全局配置文件中的路由守卫 通过修改应用级别的导航守卫来拦截所有的页面切换操作,从而允许我们在任何地方轻松访问这些功能而无需重复编写相同的代码。 ```javascript // main.js or app.vue import Vue from 'vue'; import Router from './router'; const scrollPositions = {}; Router.beforeEach((to, from, next) => { // Save the current page's scroll position before leaving it. if (from.meta.keepAlive && document.querySelector('.content')) { scrollPositions[from.path] = document.querySelector('.content').scrollTop || 0; } next(); }); Router.afterEach(to => { setTimeout(() => { // Restore saved scroll position after entering a new route that should remember its state. if (scrollPositions[to.path]) { const contentEl = document.querySelector('.content'); if (contentEl) { contentEl.scrollTop = scrollPositions[to.path]; } } }, 0); }); ``` 这里假设 `.content` 是你想要控制其垂直滚动行为的选择器名称,请根据实际情况调整选择器路径。 另外需要注意的是,上述方法适用于大多数场景下的简单需求。如果项目中有更复杂的要求,则可能需要考虑采用更加灵活的方式来进行状态管理,比如 Vuex Store 来集中存储和管理各个视图的状态信息。 #### 防止缓存导致的问题 为了避免由于页面被缓存而导致的数据陈旧或交互异常现象发生,建议使用 `<keep-alive>` 组件包裹 `<router-view>` 并为其设置动态键名作为唯一标识符,这样即使同一个 URL 地址也会因为不同的参数组合而被视为两个独立的历史记录项[^3]: ```html <template> <!-- ... --> <keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive> <!-- ... --> </template> ``` 这样做不仅解决了缓存带来的困扰,同时也提高了应用程序的整体性能表现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值