开发眼中的一些前端交互优化

移动web开发与PCweb开发有哪些不同？

1. 首先一点就是性能：手机端的性能，要求更高；
2. M中有很多meta标签；V中的css有很多屏幕适配；C中的交互优化与性能优化；

交互优化与性能优化的差别

系统真的快于用户感觉很快，是两码事；交互优化是更多的根据用户的实际感受来优化。

1. 交互优化 – 点击事件(如下场景：延时，卡顿；)

• 根本原因：默认点击有300ms延迟：有很多pc网页没有做移动端分辨率兼容，需要放大缩小来浏览，则简单暴力用双击300ms以内来决定放大缩小。所以单击的时候会有延迟

• 移动web优化之tap事件替代click

• 移动web优化之添加点击状态

2. 交互优化 – 滚动的交互优化(基本概念：全局滚动与局部滚动)

• 在ios系统中，全局滚动是默认支持的，局部滚动：默认没有滚动条，而且滚动起来比较干涩；

• 如何让局部滚动具有全局滚动这么流畅的效果呢？

子节点可以继承这个属性；

• 那么在Android上呢？

出界的情况
在滚动的时候，滚到边界之后，继续滚动，会有黑边出来；

• 如何解决出界的问题呢？

在iOS中，可以使用ScrollFix组件来结局

对于局部滚动，页面上有一些固定的导航区域，这时候可以禁止他的touchmove默认事件；

• 在全局滚动，怎么样才能阻止出界呢？

在android中呢？使用局部滚动，有时候是的滚动条会断裂；

比如一些比较常见的布局，如何实现全局滚动呢？举个例子：

通过上下的设置padding值，这样就可以使用全局滚动了；

总结一下

3. 交互优化 – 键盘定制

• 比如我们再有一些键盘输入时，系统怎么知道我们是要数字还是英文,这时候，我们就可以根据业务的需求，定制自己的键盘模式

英文键盘

数字键盘

• 两种不同的数字键盘，还有一种高级的配置键盘方式：

设置搜索框键盘

• 为什么还要用form表单包裹起来呢?这是因为键盘上有一个搜索按钮，当用户点击之后，我们可以处理点击的一些事件；

4. 定制键盘的行为

• 去掉一些首字母大写的情况；比如用户名

• 去掉一些多余的纠错行为

• 兼容性：样式与行为；ios基本都支持，但是android中，各种版本兼容性表现不一致，但是可以先使用，达到尖晶增强的效果；

来源 https://blog.youkuaiyun.com/i10630226/article/details/53998150?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160017569119195162141257%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160017569119195162141257&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v3~pc_rank_v3-19-53998150.pc_ecpm_v3_pc_rank_v3&utm_term=web前端常见的交互有哪些&spm=1018.2118.3001.4187