文档章节

利用touch事件模仿iPhone右滑返回上一页

困觉的曼巴er
 困觉的曼巴er
发布于 2017/07/17 14:13
字数 633
阅读 25
收藏 0

适用场景:比较简单的交互,例如从一个列表页面进入详情页面,在详情页面右滑返回到列表页面。

主要思路就是将详情页面通过一个iframe,append到当前窗口的top层,在右滑时将iframe的背景设置为透明,里面的元素进行右移,当右移到一定距离后隐藏该iframe,效果如下:

几个需要注意的地方:

1、如果是苹果手机,这个功能就会和手机本身的右滑返回冲突,所以需要通过navigator.userAgent来区分客户终端, 如果是苹果就正常通过href跳转到详情页面。

2、首次点击查看详情需要新建详情的iframe, 之后再点击其他的内容查看详情,只需要改变iframe的src,不要再新增iframe。

3、当iframe加载完毕时(即详情页面的内容加载完毕),隐藏包裹列表的元素, 因为实际上列表和点击列表某条记录进入的详情iframe都是在一个页面上,左右滑动的过程就是实现这两个部分的交替显示和隐藏。

4、在“touchstart”事件中,获取开始的x,y坐标,在“touchmove”事件中获取滑动后的X,Y坐标,通过Math.abs(X - x) - Math.abs(Y - y) > 0判断是左右滑动还是上下滑动, 通过X-x > 0可判断是左滑还是右滑,在“touchend” 事件中,通过滑动的距离(是否超过页面宽度的一半)判断是隐藏iframe(即造成返回上一页的效果),还是让iframe的left = "0px"(即归位,依然是详情页面), 效果如下:

5、由于这个思路是通过类似于弹出窗口的形式, 通过在主页面添加iframe展现子页面内容来实现子页面可右滑返回主页面的效果,所以不适用于页面较多交互比较复杂的场景。

6、本来是想滑动过程中改变iframe的left值,可是滑动的时候整个iframe会抖动(不知什么原因), 而改变iframe页面中的根div的left值效果就很流畅,这样一来只要iframe的背景透明, 就可以实现这种“美女揭开面纱”的效果了。

7、iframe背景设置透明的方法:给iframe中页面的body加上属性:background: transparent即可。

© 著作权归作者所有

困觉的曼巴er
粉丝 1
博文 27
码字总数 13086
作品 0
其它
程序员
私信 提问
iOS体验性优化---RTL适配右滑返回

[TOC] 简述 iOS的导航支持左滑手势返回上一个界面,这是果粉普遍喜欢的一个特性,iOS7之后的APP适配大多会保留这一特性,慢慢的大多用户已经有了这种操作习惯,对于iPhone的无虚拟键,这种操...

苛求帅
2017/12/31
0
0
绕过IOS 12锁屏访问通讯录和相册

     苹果公司一直很为在用户隐私和安全方面的努力而自豪,虽然很努力但也经常有漏洞。研究人员最近发现最新的iOS 12和iOS 12.1 beta版本中的bug,攻击者利用该bug可以绕过锁屏的密码,并...

嘶吼RoarTalk
2018/09/30
0
0
轻量级滑块Swiper插件发布(原生js,仅3kb)

Light-Swiper 专注于移动端、轻量级Swiper原生插件(3kb gziped)。触摸事件基于element,不影响页面的触摸事件(如右滑返回上一页) 重构于Swipe,实现自定义swipe宽度、偏移量、无限轮播、...

SimonZhang
02/21
0
0
边框侧滑返回!!!!!

前言: ios7开始 苹果增加了页面 右滑返回的效果;具体的是以UINavigationController为容器的ViewController间右滑切换页面。 代码里的设置是: self.navigationController.interactivePopGe...

Im刘亚芳
2015/04/20
0
0
右滑返回ios

【转载请注明出处】 iOS 7中在传统的左上角返回键之外,提供了右滑返回上一级界面的手势。支持此手势的是UINavigationController中新增的属性 interactivePopGestureRecognizer,即右滑返回只...

hanbing94
2015/09/09
926
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql mysql常用的常用函数

1. 数学函数 函 数 作 用 ABS(x) 返回x的绝对值 CEIL(x),CEILIN(x) 返回不小于x的最小整数值 FLOOR(x) 返回不大于x的最大整数值 RAND() 返回0~1的随机数 RAND(x) 返回0~1的随机数,x值相同返...

edison_kwok
48分钟前
2
0
译:Spring Data Repository 不区分大小写查询

使用Spring Data Repository 不区分大小写查询 原文链接:https://www.baeldung.com/spring-data-case-insensitive-queries 作者:Shubhra Srivastava 译者:liululee 1. 概览 Spring Data ......

liululee
55分钟前
2
0
读书replay《maven实战》.1.20190526

前情提要 maven这个工具用了好久了,但是一直都用的迷迷糊糊的,没有对它进行过系统性的学习,只是知道一些常用的功能怎么实现,所以20190516这一天我从JD购买了徐晓斌老师所著的《maven实战...

wanxiangming
今天
2
0
真实项目案例实战——【状态设计模式】使用场景

什么是状态模式 状态模式允许一个对象在其内部状态改变的时候改变其行为。这个对象看上去就像是改变了它的类一样。 状态模式应用场景 1.一个对象的行为取决于它的状态,并且它必须在运行时刻根...

须臾之余
今天
2
0
Java 实现把字符串转换成整数【底层实现】

https://blog.csdn.net/zl18310999566/article/details/80263396

qimh
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部