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

短命女 2022-07-13 09:10 335阅读 0赞

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

首先一点就是性能：手机端的性能，要求更高；

![0yMWEqi.png][]

M中有很多meta标签；V中的css有很多屏幕适配；C中的交互优化与性能优化；

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

![b8fYJkT.png][]

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

![LEouytr.png][]

## 1. 交互优化 – 点击事件 ##

如下场景：延时，卡顿；

![C4Ak20G.gif][]

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

![pNkehje.png][]

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

![bE03EVo.png][]

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

![84SQCTA.png][]

## 2. 交互优化 – 滚动的交互优化 ##

基本概念：全局滚动与局部滚动

![nbblpKP.png][]

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

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

![ZBmkwQc.png][]

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

那么在Android上呢？

![gOdmr5s.png][]

### 出界的情况 ###

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

![yt46FQt.png][]

如何解决出界的问题呢？

在iOS中，可以使用ScrollFix组件来结局，其核心的代码如下；

![kGE1JO2.png][]

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

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

![QW5ksB6.png][]

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

![aUcp52V.png][]

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

![WJhrqeE.png][]

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

**总结一下**

![3TBC8Wu.png][]

## 3. 交互优化 – 键盘定制 ##

比如我们再有一些键盘输入时，系统怎么知道我们是要数字还是英文，中文呢？如下图所示

![BNdbVCp.png][]

这时候，我们就可以根据业务的需求，定制自己的键盘模式

**1. 英文键盘**

![BelXFqg.png][]

**2. 数字键盘**

![zQRXweD.png][]

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

![qeKe1WX.png][]

**3. 设置搜索框键盘**

![Q0YSdNW.png][]

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

**4. 定制键盘的行为**

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

![zY8df2Z.png][]

去掉一些多余的纠错行为

![7LM1S3z.png][]

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

[0yMWEqi.png]: http://i.imgur.com/0yMWEqi.png
[b8fYJkT.png]: http://i.imgur.com/b8fYJkT.png
[LEouytr.png]: http://i.imgur.com/LEouytr.png
[C4Ak20G.gif]: http://i.imgur.com/C4Ak20G.gif
[pNkehje.png]: http://i.imgur.com/pNkehje.png
[bE03EVo.png]: http://i.imgur.com/bE03EVo.png
[84SQCTA.png]: http://i.imgur.com/84SQCTA.png
[nbblpKP.png]: http://i.imgur.com/nbblpKP.png
[ZBmkwQc.png]: http://i.imgur.com/ZBmkwQc.png
[gOdmr5s.png]: http://i.imgur.com/gOdmr5s.png
[yt46FQt.png]: http://i.imgur.com/yt46FQt.png
[kGE1JO2.png]: http://i.imgur.com/kGE1JO2.png
[QW5ksB6.png]: http://i.imgur.com/QW5ksB6.png
[aUcp52V.png]: http://i.imgur.com/aUcp52V.png
[WJhrqeE.png]: http://i.imgur.com/WJhrqeE.png
[3TBC8Wu.png]: http://i.imgur.com/3TBC8Wu.png
[BNdbVCp.png]: http://i.imgur.com/BNdbVCp.png
[BelXFqg.png]: http://i.imgur.com/BelXFqg.png
[zQRXweD.png]: http://i.imgur.com/zQRXweD.png
[qeKe1WX.png]: http://i.imgur.com/qeKe1WX.png
[Q0YSdNW.png]: http://i.imgur.com/Q0YSdNW.png
[zY8df2Z.png]: http://i.imgur.com/zY8df2Z.png
[7LM1S3z.png]: http://i.imgur.com/7LM1S3z.png