• 移动web终端交互优化


    在移动设备上没有了鼠标输入,hover等一些鼠标事件不再生效,取而代之的是触摸事件touch

    移动web页面上的click事件响应都要慢300ms

    300ms延迟怎么破?

    使用Tap事件代替click事件

    Tap事件一般引用移动框架库Zepto.js

    tap点透bug:若一个btn上面有个遮罩的话,当点击遮罩时不仅会促发遮罩上的点击事件也会触发btn上的点击事件

    click事件和tap事件触发过程

    touch事件:

    触摸才是移动设备交互的核心事件

    touchstart:手指触摸屏幕触发(已经有手指放在屏幕上不会触发)

    touchmove:手指在屏幕上滑动,连续触发

    touchend:手指离开屏幕时触发

    touchcancel:系统取消touch时触发(不常用)

    除常见的事件属性外,触摸事件包含专有的触摸属性

    touches:跟踪触摸操作的touch对象数组

    targetTouches:特定事件目标的touch对象数组

    changeTouches:上次触摸改变的touch对象数组

    touch事件的bug:

    弹性滚动:当客户端的页面滚动到顶部或底部的时候,滚动条会收缩并让我们多滚动一定距离。通过缓冲反弹的效果,带给用户良好的体验

    移动web页面也拥有这样的能力,但滚动有几种情况需要考虑,

    body层的滚动:(系统特殊化处理)

    自带弹性滚动:overflow:hidden(失效),GIF和定时器暂停

    局部滚动:没有弹性滚动,没有滚动惯性,不流畅

    局部滚动开启弹性滚动:

      body{
          overflow:scroll;
         -webkit-overflow-scrolling:touch;
      } 

    注:android不支持原生的弹性滚动!但可以借助第三方库iScroll来实现

    下拉刷新:顶端下拉一小点距离页面弹性滚动向下

    上拉加载

    使用scroll事件而不是touch事件(android有bug)

    常见bug解决方案:

  • 相关阅读:
    node.js开发 打包管理工具webpack
    node.js开发 npm包管理工具 npm 和 cnpm区别
    node.js开发 npm包管理工具
    node.js开发 1-概述
    脚手架-1概念
    前端开发 vue,angular,react框架对比2
    AttachDispatch
    画图软件orign的使用
    建立xml文件时遇到的编码问题和解决方法
    securecrt简介
  • 原文地址:https://www.cnblogs.com/mujinxinian/p/5570889.html
Copyright © 2020-2023  润新知