angluar1+ionic详情页返回在原来的位置(缓存数据和页面高度)
因为是老项目,近期开发遇到了个需求就是从详情页按返回按钮要求返回到原来列表的页面位置,刚开始准备用的cache:true,但是存在大大的问题就是新增和编辑后返回数据都不是最新的,无法重新刷新页面reload方法失效了,那肯定是不过关的(如果没有新增和编辑的列表页可以考虑用),想了想改成了强制刷新parent.location.reload,在:$rootScope.$on('$stateChangeSuccess',function(){})监听切换成功和数据保存成功后强制刷新页面,效果是可以了,但是也有个bug就是苹果手机强制刷新时有个黑屏,感觉很不友好。然后就放弃了。
现在我说说我的思路:利用本地存储记下跳转时页面的高度,然后返回时滑动到这个位置,那也就没必要重新请求接口了,不然也会重新刷新的,特别是做了分页的页面就会很不友好了,这时也要把列表额数据缓存下来,
代码是这样的


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


希望能帮助别人,有更好方法的希望能留言分享下
angluar1+ionic详情页返回在原来的位置(缓存数据和页面高度)的更多相关文章
- react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置
现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...
- vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求
问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...
- keep-alive 实现从列表页到详情页,然后再回到列表页并保持原来列表页的页码数,并且只刷新数据
思路: keep-alive应用场景介绍 <keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例.结合router,缓存部分页面 activated 和 deactiv ...
- mui列表跳转到详情页优化方案
原理 因为列表页到详情页是多对一的形式,即列表页的多条数据列表对应的是一个详情页,只是数据不同而:因此,可以在加载列表页时预加载详情页,即创建一个详情页的webview,但是不显示出来,点击列表的时候 ...
- [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- [ionic开源项目教程] - 第9讲 新闻详情页的实现
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- Django:文章详情页面评论功能需要登录后才能使用,登录后自动返回到文章详情页
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...
- 微信小程序--详情页的推荐位置继续打开详情页;返回之后分享等数据不正确问题
问题背景 -- 分享的数据来源 当前在维护的小程序项目使用wepy开发:分享的数据都是通过接口请求后台的形式获得:然后存在了数据data的对象中:类似 定义分享数据 data = { shareDat ...
- iOS开发——UI进阶篇(十)导航控制器、微博详情页、控制器的View的生命周期
一.导航控制器出栈 1.initWithRootViewController本质 UIViewController *vc = [[OneViewController alloc] init]; // ...
随机推荐
- ID 生成器 雪花算法
https://blog.csdn.net/wangming520liwei/article/details/80843248 ID 生成器 雪花算法 2018年06月28日 14:58:43 wan ...
- 从已删除邮箱copy数据到活动邮箱
Start Windows PowerShell Start > search for "PowerShell" > Start Windows PowerShell ...
- Spring3基础原理解析
一.Spring3主要含义 Spring3是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架. 注:IOC的作用:对象依赖的其他对象通过被动的形式传递进来而不是这个对象常见或者查找依赖对象 ...
- 流程帮App风险评估
一. 存在风险 此处罗列出了我们开发小组可能遇到8种的风险. 编号 风险名称 内容 发生概率 损失(人周) 危险度(周) 1 计划编制风险 对所要使用技术不熟悉,可能导致无法交付: 每个模块的实现一定 ...
- Java笔记Spring(七)
DispatcherServlet初始化,继续分析日志 主要部分: 23-May-2018 17:47:55.457 INFO [RMI TCP Connection(3)-127.0.0.1] or ...
- React面试题
React 简述下React的生命周期,性能优化在哪个生命周期,ajax操作在哪个生命周期 React中key的作用是什么 什么是虚拟DOM diff算法原理 React中refs的作用是什么
- Webdriver+Testng实现测试用例失败自动截图功能
testng执行测试用例的时候,如果用例执行失败会自动截图,方便后续排查问题 1.首先定义一个截图类: package com.rrx.utils; import java.io.File;impor ...
- gunicorn开启、关闭和重启
1.gunicorn开启 在项目的根目录下,输入下方的代码. gunicorn --bind unix:/tmp/域名.socket projectname.wsgi:application 2.查询 ...
- Convert Adjacency matrix into edgelist
Convert Adjacency matrix into edgelist import numpy as np #read matrix without head. a = np.loadtxt( ...
- 宝塔面板配置阿里云SSL证书流程
阿里云SSL证书申请过程就不在这里说了 1 先下载阿里云成功申请的SSL证书 解压后 有3个文件 2 找到宝塔面板的 站点设置 找到SSL设置 3 找到其他证书 用文本打开.key文件 复制里面 ...