angluar1+ionic详情页返回在原来的位置(缓存数据和页面高度)

因为是老项目,近期开发遇到了个需求就是从详情页按返回按钮要求返回到原来列表的页面位置,刚开始准备用的cache:true,但是存在大大的问题就是新增和编辑后返回数据都不是最新的,无法重新刷新页面reload方法失效了,那肯定是不过关的(如果没有新增和编辑的列表页可以考虑用),想了想改成了强制刷新parent.location.reload,在:$rootScope.$on(‘$stateChangeSuccess‘,function(){})监听切换成功和数据保存成功后强制刷新页面,效果是可以了,但是也有个bug就是苹果手机强制刷新时有个黑屏,感觉很不友好。然后就放弃了。

现在我说说我的思路:利用本地存储记下跳转时页面的高度,然后返回时滑动到这个位置,那也就没必要重新请求接口了,不然也会重新刷新的,特别是做了分页的页面就会很不友好了,这时也要把列表额数据缓存下来,

代码是这样的

,除了这些外你还需要在跳转详情的函数里缓存下列表的数据和一个状态用来判断要不要读缓存的列表数据,在页面一开始加载的时候读取这个状态数据,一是重新请求列表接口(比如新增和编辑的回来后需要)另一个就是读取缓存数据了(比如查看详情的页面返回不会改变列表数据),这样就完美的实现需求了,当然你可以变通的看自己的需求稍微改下就好,希望能帮助别人,有更好方法的希望能留言分享下

原文地址:https://www.cnblogs.com/qianyy/p/10753320.html

时间: 2024-10-11 13:28:40

angluar1+ionic详情页返回在原来的位置(缓存数据和页面高度)的相关文章

Activity 切换动画(小米图库列表进入详情页,图片从固定位置放大进入,缩小退出)

直接上效果图 ok,来分析下如何实现的吧 分析原理 首先确定,这是两个不同的 Activity,从图片列表页跳入到图片详情页:先来看进入详情页时的动画,从列表中所在 item 的位置一直放大到详情页的显示位置,这里我可以先告诉大家,当我们点击了这个 item 的时候,就已经启动了详情页,然后在详情页做相应的动画效果.既然是在详情页做动画效果,就需要在列表页把相应的值传过去,列表页 item 在屏幕上的位置,item 的大小,当然还有图片的资源,然后在详情页计算动画执行的参数.分析了进入动画,那么

移动端列表进入详情后返回列表回到原位置

// 返回上次浏览位置 $(function () { var str = window.location.href; str = str.substring(str.lastIndexOf("/") + 1); if ($.cookie(str)) { $("html,body").animate({ scrollTop: $.cookie(str) }, 1000); } else { } }) $(window).scroll(function () { va

亿级商品详情页架构演进技术解密 | 高可用架构系列

亿级商品详情页架构演进技术解密 | 高可用架构系列 --http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=210272034&idx=1&sn=3be9d2b53c7fec88716ee8affd2515f8&scene=1&srcid=UfXZNNOVZZyZjQmp0VOh&from=groupmessage&isappinstalled=0#rd 此文是开涛在[三体高可用架构群]之分享内容

网易新闻客户端iOS版本中新闻详情页(UIWebView)技术实现的分析探讨

本篇博客背景:1:本人是网易新闻app的忠实用户,大约每天有2~3个小时的使用时间.2:在如此频繁且长时间的使用过程中,几乎没有遇到过闪退的情况.不得不佩服人家优化的效果之好,也不得不感叹自己和大牛之间的差距之大.(不是做广告..是真爱..)3:一直都觉得网易新闻app的详情页做的特别好.前段时间,看到网上有不少人说网易新闻的详情页是用coreText(富文本)实现的.觉得很可笑,只是一个复制文字的功能,coreText便无法实现,便能排除coreText的可能性了.可是这些错误的言论在网上残留

Vue详情页回列表页保存原数据与位置。

列表页关键代码 mounted() { //非从详情页返回时正常加载数据 if (!this.$route.meta.isBack) { //执行加载数据的方法 //重新加载页面 } else { // this.onFetching = true; this.curPage = sessionStorage.getItem('curPage'); //存储分页第几页,用于返回列表页继续可以分页 ... } //执行完初始化isBack this.$route.meta.isBack = fal

[ionic开源项目教程] - 第9讲 新闻详情页的实现

目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单 [ionic开源项目教程] 第4讲 通过Service层获取新闻列表 [ionic开源项目教程] 第5讲 如何在项目中使用全局配置 [ionic开源项目教程] 第6讲 过滤器filter的使用 [ionic开源项目教程] 第7讲 实现

[ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单 [ionic开源项目教程] 第4讲 通过Service层获取新闻列表 [ionic开源项目教程] 第5讲 如何在项目中使用全局配置 [ionic开源项目教程] 第6讲 过滤器filter的使用 [ionic开源项目教程] 第7讲 实现

微信 HTML5 实现列表页与详情页无刷新返回 seesionStorage

最近在最微信端开发,遇到了一个比较有意思的问题. 1:商品分页列表页 2:商品详情页 需求:  实现当在第N页的列表页,点击ID=Num的商品详情页,跳转到详情页后,再点击返回按钮,依旧返回到列表第N页,并显式的改变ID=Num商品的查看状态 注:详情页与列表页是两个视图页,并且要考虑弱网请求服务端接口比较慢的情况 解决思路:使用sessionStorage 在列表页中将请求服务端接口返回的列表信息使用一个对象dataList存储起来,并记录当前的页码pageIndex,当点击跳转某个商品详情页

element ui源码解析 -- Pagination篇( 副:列表页进入详情页再返回后,如何保持当前页码正确 )

之所以看Pagination源码,由于一个问题: 需求:从列表页进入详情页后再返回,需求方希望保持在当前的页码而不是重新定位到第一页 问题:按照element ui文档设置current-page后请求的数据正常,但pagination的页码显示却不正确,不管current-page值等于多少,永远显示第一页 解决方案: 1. 改 :current-page="currentPage" 为 :current-page.sync="currentPage" 2.查询接