开发眼中的移动交互

internet

移动 前端开发 HTML

老教授讲解移动前端交互

weber

如何去掉300ms延迟?

2.  通过css属性解决

     touch-action:manipulation;

IE10、IE11支持主要用在触屏笔记本,如超极本

如何用Fiddler抓包调试手机端页面

1.  连接到同一个WIFI(网段)

2.  在Fiddler上开启允许远程电脑连接

3.  获取PC端的无线网络IP地址

安全限制

focus代码必须满足:

1.  将事件绑定在触发事件的节点上

1.  必须在触发事件节点的回调函数中不能冒泡

2.  必须和这个回调函数在同一个堆栈不能使用setTimeout

解决方法:

2.  客户端支持

为什么软键盘没有弹出来?

我有我特色

开发眼中的移动交互

老教授

但触发focus之后又因为点击触发blur

tap可以触发focus弹出软键盘

解决方法:

在tap事件函数中调用focus在触发事件节点上绑定 mousedown ,并阻止默认事件!

mousedown!

【示例】

为什么软键盘没有弹出来?

尝试二:躲在顶部,下拉露脸(iOS)

优点:利用原生的弹性滚动,省去了模拟弹性下拉的js代码,代码简单,性能好

如何实现下拉刷新?

postion: fixed;z-index: 0;

缺点:1.  仅iOS可用2.  内容区域必须保证挡住loading节点

适应PC端网页在手机端查看

区分单击和双击

为了区分单击双击

双击带上默认行为:放大缩小网页

300ms的延迟

为什么会有300ms延迟?

怎么添加点击态?

1.  使用css伪类 :active

优点:纯CSS实现,简单

缺点:滚动的时候会触发点击态

不建议使用

尝试三:下拉时改变loading层的高度逐渐出现

height: 0;overflow:hidden;

height: 40px;

缺点:页面的复杂度越高,下拉刷新的性能越差

如何实现下拉刷新?

优点:Android和IOS都可以使用

10.66.70.82

4.  在手机上配置网络代理

测试范例

未完待续

如何实现下拉刷新?

释放刷新

body{    -webkit-transform: translate3d(0, 40px, 0);}

优点:Android和iOS都可以使用性能相对流畅

尝试四:模仿iScroll,整体下移

释放刷新

position: absolute;left: 0;top: -40px;height: 40px;

缺点:不比启用原生弹性滚动流畅ios下要阻止弹性滚动

迟钝的点击

如何去掉300ms延迟?

1. &nbsp;加上html头部信息<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">或<meta name="viewport" content="width=device-width, user-scalable=no">

只有移动端的Google、Firefox支持Safari不支持,Android上qq内置浏览器不支持

为什么会有点透?

A

tap事件让浮层出现click事件300ms延迟中

A

点击按钮A触发A的tap事件回调click事件触发

click事件响应发现点击位置的节点是B触发B的click事件回调

B

B

2. &nbsp;Js模拟

优点:接近native应用的体验

缺点:额外的js代码

怎么添加点击态?

iOS下超链接的点击样式

改变默认点击样式

性能优化

交互设计

样式布局

高深偏门知识

不讲什么

意料之外的点透

点透示例

改成tap事件就不会弹出软键盘了?????????

为什么软键盘没有弹出来?

下拉刷新?可以有

如何实现下拉刷新?

尝试一:放在天花板,下拉拉下(iOS)

释放刷新

期望情况

不可用

释放刷新

position: absolute;left: 0;top: -40px;height: 40px;

实际情况

iOS下,top小于0的部分即使下拉也看不到

3. &nbsp;用tap替换click

◇&nbsp; 起点终点近◇&nbsp; 小范围移动◇&nbsp; 只有一个手指触屏◇&nbsp; 操作时间短

3) 代码模拟

2) 使用touchstart

1) 使用移动web框架

如何去掉300ms延迟?

点透的解决方法

1) 全部使用tap事件影响最小,容易实现

2) 阻止click事件阻止触发事件节点的touchend默认行为增加事件绑定

4) 增加延迟只有特定场景适用

3) 使用别的tap思路,如Fastclick引进新的库

【群活动例子】

我点中了吗

客户端刷新和web刷新

表单元素:输入框等

阻止click默认事件依然会触发focus

1) 使用touchstart2) 使用Fastclick

那些带有click默认行为的节点们

<a></a>

重播 分享 评论
×
×

iPresst

版本:1.0

Copyright © iPresst.com. All Rights Reserved.

创作者:TAT.Aishen, TAT.CG, TAT.DM, TAT.Jarvis, TAT.Kinvix, TAT.Weber, TAT.Yussica