移动端页面开发遇到的一些问题

需求:公司的项目,大致分为三个页面,一个H5主页,一个视频页,一个文章页,需求是,把视频页和文章页放到H5页面当中,作为一个跳转链接,H5最后一个滑动页会有一个验证,判断用户是否浏览过视频页和文章页

思路:最开始的想法是通过在视频页和文章页设置添加localStorage,然后H5页面每次在加载时判断是否存在该localStorage,如果存在,直接跳到相对应的那个显示跳转链接的滑动页,这样的话用户在H5页面中点击该链接跳转,再返回的时候,便可以直接到达跳转时的这个滑动页,简化了用户操作,避免又要从第一个滑动页开始浏览

问题:这样做会导致用户只要浏览过视频页或文章页,不管是从这两个页面返回H5还是重新打开这个H5,因为localStorage一直存在,便永远会从中间的有跳转链接的那个滑动页开始加载,想到过用sessionStorage替换localStorage,即浏览器关闭则清除该存储值,这样的话又会考虑到用户跳转到这个页面后,离开时可能误操作没有点击返回键,而是关闭了浏览器,特别是安卓手机左上角并没有返回按钮,只有关闭按钮,很容易点击到,导致清空了sessionStorage,没法儿判断,引发问题

解决方案:设置两个localStorage,一个用于返回相应的滑动页,一个用于存储用户是否浏览过该页面,第二个localStorage一旦生成,则不做任何处理,而第一个,在H5页面加载时判断是否存在该存储值以后,如果存在,就在滑动到相应位置后,即刻删除,这样则保证了用户关闭了浏览器后,再次打开,不会从中间页开始加载,而最后一个滑动页需要的是否浏览过视频页和文章页的数据也是存在的,不会受其影响,解决该问题,思路很重要


问题:含有提交表单的页面,在点击输入框时,会呼出手机的虚拟键盘,iPhone没有问题,而安卓机键盘会将原页面布局打乱,表单的输入框会被挡住,虽然可以输入数据,但是用户体验不好,想到通过监听输入框的聚焦失焦事件来改变其样式表,即聚焦时将该输入框定位到页面顶部,失焦时再返回最初样式,这样做如果用户输入完毕是点击屏幕任意一点让其失焦则没有问题,但如果用户输入完毕是点击键盘右下角的确定按键去收起键盘,则该输入框并没有失焦,所以其样式仍被固定在顶部,导致问题

解决方案:暂未解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值