一、移动端js库了解

jquery

jqueryUI

bootstrap 栅格结构

layUI

amazeUI

zepto

hammer

jquery mobile

二、 hammer.js

http://hammerjs.github.io

1．简介

用于检测触摸手势的 JavaScript 库

添加对触摸手势的支持并移除了点击的 300ms

支持最常见的单点和多点触摸手势，并且可以完全扩展以添加自定义手势

[图片上传中...(image.png-f6f032-1554773291083-0)]

2．CDN

https://cdnjs.com/libraries/hammer.js

3．主要事件

1) tap

在指定的 DOM 区域内，一个手指轻拍或点击时触发该事件（类似 PC 端的 click），该事件最大点击时间为 250ms，如果超过 250ms 则按 press 事件处理

2) press

在指定的 DOM 区域内，这个事件相当于 PC 端的 Click 事件，不能包含任何的移动，最小按压时间为 500ms，常用于我们在手机上用的复制粘贴等功能

该事件事分别对以下事件进行监听并处理

pressup: 点击事件离开时触发

3) pan

在指定的 DOM 区域内，一个手指放下并移动事件，即触屏中的拖动事件

该事件事分别对以下事件进行监听并处理

panstart: 拖动开始

panmove: 拖动过程

panend: 拖动结束

pancancel: 拖动取消

panleft: 向左拖动

panright: 向右拖动

panup: 向上拖动

pandown: 向下拖动

4) swipe

在指定的 DOM 区域内，一个手指快速的在触屏上滑动，即平时用到最多的滑动事件

该事件事分别对以下事件进行监听并处理

swipeleft: 向左滑动

swiperight: 向右滑动

swipeup: 向上滑动

swipedown: 向下滑动

5) pinch

在指定的 DOM 区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件

该事件事分别对以下事件进行监听并处理

pinchstart: 多点触控开始

pinchmove: 多点触控过程

pinchend: 多点触控结束

pinchcancel: 多点触控取消

pinchin: 多点触控时两手指越来越近

pinchout: 多点触控时两手指越来越远

6) rotate

在指定的 DOM 区域内，当两个手指或更多手指呈圆型旋转时触发

该事件事分别对以下事件进行监听并处理

rotatestart: 旋转开始

rotatemove: 旋转过程

rotateend: 旋转结束

rotatecancel: 旋转取消

4．使用

const app = document.querySelector('#app');

const hammertime = new Hammer(app);

hammertime.on('pan', function(ev) {

  console.log(ev);

});

1) 默认禁用pinch 和rotate

hammer.js 提供了 tap, doubletap, press, horizontal pan, swipe 和多点触控的 pinch, rotate，默认情况下 pinch 与 rotate 是禁用的，因为它们会阻塞元素，可以通过以下命令来启用。

hammertime.get('pinch').set({ enable: true });

hammertime.get('rotate').set({ enable: true });

2) pan与swipe的垂直方向是禁用的

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });

hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

尽量避免使用垂直方向的pan与swipe。垂直 pan 用于滚动页面，一些（旧）浏览器不会触发这个事件，所以 hammer.js 无法识别。

3) 删除 Windows Phone 上的突出显示

Windows Phone 上的 IE10 和 IE11 在点击某个元素时会突出显示一个小点，添加这个 meta 来删除。

4) 需要选择文本

hammer.js 会设置 user-select 来提高 PC 的平移体验，如果需要文本选择，需要在创建实例前执行此操作。

delete Hammer.defaults.cssProps.userSelect;

5．事件对象

image.png

三、 zepto.js

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。

[https://github.com/madrobby/zepto](https://github.com/madrobby/zepto)

1．$.contains(parent,child)

检查父节点是否包含给定的dom节点，如果两者是相同的节点，则返回 false。

注意：传入的参数不是zepto对象。而是一个原生的js dom对象。

可以使用zepto对象的0下标产生原生dom对象。

alert($.contains($('.se')[0],$('#nav')[0]));

2．$.extend

通过源对象扩展目标对象的属性，源对象属性将覆盖目标对象属性。

默认情况下为，复制为浅拷贝（浅复制）。如果第一个参数为true表示深度拷贝（深度复制）。

$.extend(true, target, [source, ...])

对象数组默认的是浅拷贝，如果改变最外层数据的类型，那么就变成深拷贝。如果改变的是里面的内容，那么是浅拷贝。

四、 Jquery Mobile

1．data角色

data-role="page" 是在浏览器中显示的页面。同一个页面可以具有多个page，可以使用锚点技术进行跳转。

data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)

data-role="main" 定义了页面的内容，比如文本，图片，表单，按钮等。

"ui-content" 类用于在页面添加内边距和外边距。

data-role="footer" 用于创建页面底部工具条。

1) page角色可以用作为弹出框（对话框）。

只需要设置data-dialog=true .

2．过度

image.png

切换到第二个页面

3．按钮

1) 创建方式：

使用

移动端框架 （2019.4.3）

一、 移动端js库了解

二、 hammer.js

1．简介

2．CDN

3．主要事件

1) tap

2) press

3) pan

4) swipe

5) pinch

6) rotate

4．使用

1) 默认禁用pinch 和rotate

2) pan与swipe的垂直方向是禁用的

3) 删除 Windows Phone 上的突出显示

4) 需要选择文本

5．事件对象

三、 zepto.js

1．$.contains(parent,child)

2．$.extend

四、 Jquery Mobile

1．data角色

1) page角色可以用作为弹出框（对话框）。

2．过度

3．按钮

1) 创建方式：

2) 设置按钮为行内

3) 返回按钮

4) 修改按钮的颜色

5) 为按钮添加圆角

6) 小一号的按钮

7) 为按钮添加阴影

4．按钮图标

1) 设置方式

2) 定位图标

3) 如果只需要图标，不需要文字

4) 移出圆圈

5) 设置没有文本的圆型图标

6) 使用黑色图标

5．弹窗

1) 添加边距

2) 添加关闭按钮

3) 定位弹窗

4) 过渡

5) 弹窗对话框开口方向

6) 弹窗的背景覆盖

6．工具栏

1) 头部栏

2) 尾部

3) 定位

你可能感兴趣的:(移动端框架 （2019.4.3）)

移动端框架（2019.4.3）

一、移动端js库了解

你可能感兴趣的:(移动端框架（2019.4.3）)