计算机技术发展这么多年, 有些方面太老了,不适合新时代的发展,
使用新的规范,更方便开发和使用, 提高各方使用人的工作效率, 何乐而不为
drag drop
html5新增属性
某些操作使用拖拽比较方便, 比如调整页面图片顺序,文件批量上传等
使用
drag的事件有开始 中间 结束三个状态,
开始结束两个event是定义在不同的element上,
event可以设置复杂的attribute,这样在事件结束时就可以取出开始的数据
文件上传进度
XHR onprocess 原生事件
多文件上传 multiple
左右滑动
移动端事件, 用来切换tab
方案一、使用touchstart touchend 原生事件
step1.记录移动坐标xy
touchstart ===> event.touches[0].clientX 不要使用pageX
touchend ===> event.changedTouches[0].clientX 不要使用pageX
step2.角度计算
基于数学中的弧度
Math.atan( Math.abs((this.touchendy - this.touchstarty)/(this.touchendx - this.touchstartx)))* 180/Math.PI < 30
方案二、使用vue-touch插件
小坑:非标准web场景插件不能用, 比如uni app端没有标准document,它只是使用了JS V8运行引擎
输入框type=progress
进度条直接用input
多指触控
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events