hybrid App h5二级页面返回的时候保持与一级页面浏览的位置一致
最近在开发公司hybrid app的时候,需要将原本原生的配置中心模块统一变更为H5,做完之后从测试那里反馈回来这样一个问题,当滑到页面底部或中部的时候进入子页面进行设置,返回的时候页面应该定位到离开时候的位置,就是不要回到页面顶部,体验要接近原生。
提出的解决方案:在react生命周期的componentWillUnmount阶段获取当前滚动条的滚动距离,并且将这个数值存储在sessionStorage中,然后在componentWillMount阶段获取之前存储在sessionStorage中当前页面滑动条距离顶端的问题,然后开始采用window.scrollTo方法将当前页面滚动到之前页面停留的位置,即可实现需求。由于这个配置中心模块只有主页面是特别长的需要做这个操作,其他子页面都很短,因此不必考虑会对其他H5页面造成干扰。在chrome上调成手机模式自测没有问题,体验很好,遂上传代码,以为完美的解决了这个问题。然而,实践是检验真理的唯一标准,在打包构建放到stg环境上之后,用安卓手机自测发现报错:scrollTo is not a function,原来安卓的上元素不支持scrollTo的方法。
正确方案:后经反复试验,采用了一个更加周密、可靠的解决方案。首先在组件上监听一个滚动事件。即在componentWillMount阶段使用原生js监听滚动,
document.addEventListener('scroll', this.e.onScrollHandle, false);
constructor中也要注册一下这个方法:
this.e = {
onScrollHandle: this.onScrollHandle.bind(this)
};
具体的滚动事件,将其滚动位置实时记录下来
onScrollHandle(event) {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
localCache.setItem('_device_setting_scroll_' + PAGE_PARAMS.deviceId, scrollTop);
}
此处采用了localCache本地缓存作为存储容器,并且根据当前配置页面的deviceId作为标志位作了区分,防止记录上一台设备的设置页面的滚动位置而影响到下一台设备的设置页面的滚动位置。
在componentDidMount阶段取出记录的滚动条滚动位置,并开始滚动到指定位置,滚动到指定位置后移除记录的key,若用户又开始滚动,则又开始记录,若用户不再滚动,只是打开看一眼,则下次页面会置顶。
let cacheKey = '_device_setting_scroll_' + PAGE_PARAMS.deviceId;
localCache.getItem(cacheKey).then((scrollTop) => {
if(scrollTop){
document.body.scrollTop = document.documentElement.scrollTop = scrollTop || 0;
}
localCache.removeItem(cacheKey); });
最后,在componentWillUnmount阶段移除监听事件:
document.removeEventListener('scroll', this.e.onScrollHandle);
经测试,IOS和安卓手机都达到了预期效果,圆满修复了此bug。
hybrid App h5二级页面返回的时候保持与一级页面浏览的位置一致的更多相关文章
- 第三方网站返回hybrid app H5页面缓存问题应对策略
最近负责公司各产品线购买模块的开发,各项功能如期开发完成后测试那边反馈回来一个问题:IOS手机在点击支付宝购买后,跳转到支付宝网站时不输入支付密码,直接点返回,返回到我们自己的APP购买界面发现页面显 ...
- 3分钟学会sessionStorage用法(h5页面返回滚动到上次浏览器位置)
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- hybrid app、react-native 区别
hybrid app.react-native 区别: 项目 hybrid app react-native 组件 用HTML.CSS.JavaScript实现页面的制作,然后运行在Webview上( ...
- html5手机返回按钮跳转到指定页面问题
最近在做活动的时候有一个这样的场景,在主页面点击跳出一个弹层表单,填写完信息后,点击确认跳转到指定的展示页面了.这时候在手机端点击浏览器自带的返回按钮后,回到主页面,这时候主页面无法刷新,弹层信息还在 ...
- Hybrid APP之Native和H5页面交互原理
Hybrid APP之Native和H5页面交互原理 Hybrid APP的关键是原生页面与H5页面直接的交互,如下图,痛过JSBridge,H5页面可以调用Native的api,Native也可调用 ...
- Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理 目录 前言 参考来源 前置技术要求 楔子 A ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...
- 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处
因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...
随机推荐
- (三)使用XML配置SQL映射器
SqlSessionFactoryUtil.java package com.javaxk.util; import java.io.IOException; import java.io.Input ...
- Jenkins在Linux环境安装
Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. 安装环境 操作系统:lin ...
- WDK10+VS2015 驱动环境搭建
其实做驱动或者说底层安全的最大问题就是没有合适的资料去参考,网上很难找到想要的信息.比如搭建驱动环境我以前一直用的都是WDK7.1基于控制台去编译的,之前尝试过搭建WDK10+VS2015的组合环境, ...
- 根据条件批量删除document
curl -H "Content-Type:application/json" -XPOST http://localhost:9200/devopsrealinfo/_dele ...
- CF 586A 找1的个数和101的个数
Sample test(s) input 50 1 0 1 1 output 4 input 71 0 1 0 0 1 0 output 4 input 10 output 0 # include & ...
- Pytest里,mark装饰器的使用,双引号,没引号,这种差别很重要
按最新版的pytest测试框架. 如果只是单一的mark,不要加任何引号. 如果是要作and ,not之类的先把,一定要是双引号! 这个要记清楚,好像和以前版本的书上介绍的不一样,切记! import ...
- Linux 中 &、jobs、fg、bg 等命令
参考 Unix 或 Linux 中 &.jobs.fg.bg 等命令的使用方法 对之前文章的一个补充: linux 命令后台运行 这篇还是比较简单的,稍微一带而过 fg.bg.jobs.&a ...
- Web前端开发最佳实践(10):JavaScript代码不好读,不好维护?你需要改变写代码的习惯
前言 这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽 ...
- java异常查看利器之使用 jvmti 的Callback_JVMTI_EVENT_EXCEPTION 事件查看异常
阅读本文前需要了解什么是jvmti,jvmti全称称之为 JVM Tool Interface,有关jvmti更详细的知识,本文不再详细列出.大家可以借助百度来了解有关它更为详尽的内容. 在开源文件大 ...
- 让ORM支持多结果集
在现有的ORM框架中,都支持查询单个结果集.比如查询用户表,传入语句,返回一个用户对象的集合.虽然一次性查询多个结果集的情况不多,而且也可以通过多次查询得到,但是从写框架的角度来说,我们并不清楚客户( ...