对于一般采用同样的技术栈开发的多页面应用来说,可能遇到的状况如下:
- h5上拉刷新来实现分页,当有很多页的话,点击列表某一页去详细,然后从详情返回上一页,可能刷新上一页,位置不能保持,体验不好
- 列表使用a链接过去的,详情使用window.history.go(-1)返回,有些浏览器不刷新上一页(ios中safari,UC等),有些页面刷新上一页(ios中微信等)
- 有说使用单页的话,可以保持。但是之前用过angular1.X来实现单页,返回貌似也有这个问题(重新执行了列表js),最近在github看到有用vue实现了这个的效果:https://github.com/lzxb/vue-cnode?from=xitu
- 有说列表用window.open,详情用window.history.go(-1),h5实践了,不可以,见上一篇。
- 之前还想过用iframe标签,但是这只适合用于iframe嵌入的页面可进入的下级页面有限,不会再回到列表页面,或者就是一个预览性的小页面。
基于以上背景中的一些方法,除了提到的一些弊端,还只适合于简单的从详情页到列表页不需要更新列表页数据的情况,如果是需要更新列表页数据就需要考虑怎样把要更新的某一条数据的标志传到列表页,列表页再通过ajax请求最新的数据。
在实际中遇到的项目是原来的php项目用vue重构,列表页等部分页面是vue单页应用,详情页因为考虑seo的问题依然是php页面,这就导致两个完全不同的技术栈的页面之间是完全独立的,背景中提到的打开新窗口的页面对于pc端和安卓手机的主流浏览器都是可行的,但是对于微信浏览器和iphone中的大部分国内浏览器都是默认不执行新窗口打开的。本来想用直接关掉新窗口重现列表页的方法还是不够好,特别是对于微信浏览器这种手机端比较大的流量入口来说,无论怎样都会刷新列表页,根本达不到我们想要的效果。
因此,后面才想着把当点击列表页的时候,把列表页整个数据都存在客户端,当再次返回到列表页的时候,通过判断是否存在数据来确定是否需要加载新的数据,如果有数据直接将页面显示出来,然后定位到之前保存的scrolltop值得位置。
这种方法当然解决了手机各个浏览器直接新窗口打开的兼容性问题,唯一的弊端就在于可能要保存的数据量有点大,并且数据保存在客户端可能存在的一些安全风险。
还有当时遗留的怎样判断是从详情页返回的问题,后来在github上面看到设置锚点的方法,大体的思路跟我想的一致。只不过我的是vue里面,因此我是把整个data数据转成字符串保存了下来。锚点的具体实现方式是在列表页滚动的时候记录页面的scroll-top值,然后把scroll-up的值设置锚点如(#scrollY = scroll-top)这样如果是返回的页面就可以在列表页获取到hash,hash存在就可以判断是从详情页返回的页面,如果是从其他页面通过链接进入的就直接新请求数据,更新列表页。
https://luchanan.github.io/detail2list/index.html 类似的github上的一个项目示例,非常感谢分享啦
可能的解决方案:
最后附上自己测试过的vue页面中使用的代码:
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。