移动端开发实践小结

2017-07-28 | 移动端

# 300ms延迟

在移动浏览器中,当你点击按钮的单击事件时,将会等待大约300ms的时间。这是因为,浏览器是等着看看你是不是在执行双击。

不过300ms延迟给带来了不好的用户体验,特别在切换选项卡的时候,会让人觉得是不是没有按到。

我们可以使用fastclick.js解决这个问题,可以在这里fastclick下载到文件。

在页面引入fastclick.js后,接着实例化fastclick最好在body元素的前面,这是使用推荐的方法:

if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}

# 虚拟键盘导致 fixed 元素错位

当我们在手机的页面上输入文字,fixed的元素会在虚拟键盘出现的时候,表现却变得怪异起来,会错位。因为虚拟键盘的出现改变了viewport的高度,fixed元素也跟着改变位置。

我们可以在虚拟键盘弹出时将fixed元素设置为static,虚拟键盘消失时候设置回来。

因为不能直接获得虚拟键盘出现的事件,不过可以在页面上的输入框获取焦点(focus)的时候,将fixed元素设置为static。在页面上的输入框失去焦点(blur)的时候,将设置回来就可以了。

# 移动端触摸事件

  • 手指刚触摸到屏幕触发:touchstart
  • 手指在屏幕上滑动触发:touchmove
  • 手指离开屏幕时触发:touchend

# touchstart

touchstart事件触发时,记录手指按下的时间startTime,初始位置initialPos

# touchmove

touchmove事件触发时,记录当前位置nowPosition(实时移动元素),滑动距离movePosition(当前位置nowPosition与初始位置initialPos的差值,可以再细分成水平距离和垂直距离),判断差值的正负可以知道是左还是右移动。

# touchend

touchend事件触发时,记录手指离开屏幕的时间endTime,获得手指在屏幕上停留的时间stayTime = endTime-startTime,滑动距离movePosition

利用这3个事件,可以用于判断轮播图是否翻页:

  • 如果停留时间stayTime小于300ms,可以认为是快速滑动,无论滑动距离是多少,都翻页
  • 滑动距离与轮播图显示的容器宽度进行比较,若超过容器宽度的1/3,则翻页,否则不翻页