美文网首页
移动端框架 (2019.4.3)

移动端框架 (2019.4.3)

作者: 满天繁星_28c5 | 来源:发表于2019-04-09 09:34 被阅读0次

    一、 移动端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

    <u>https://cdnjs.com/libraries/hammer.js</u>

    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 来删除。

    <meta name="msapplication-tap-highlight" content="no" />
    

    4) 需要选择文本

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

    delete Hammer.defaults.cssProps.userSelect;
    

    5.事件对象

    image.png image.png

    三、 zepto.js

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

    [<u>https://github.com/madrobby/zepto</u>](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

    <a href="#anylink" data-transition="slide">切换到第二个页面</a>

    3.按钮

    1) 创建方式:

    使用 <button> 元素

    使用 <input> 元素

    使用带有 data-role="button" 的 <a> 元素

    设置元素的class=”ui-btn”

    2) 设置按钮为行内

    设置data-inline=“true”

    与class=”ui-btn ui-btn-inline”

    3) 返回按钮

    在按钮上设置 data-rel="back"

    4) 修改按钮的颜色

    class=“ui-btn-b”可以设置按钮的颜色为黑色。字体为白色。

    5) 为按钮添加圆角

    默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。

    class=“ui-corner-all”

    6) 小一号的按钮

    设置class=“ui-mini”

    7) 为按钮添加阴影

    设置class=“ui-shadow”
    

    4.按钮图标

    1) 设置方式

    设置类为ui-icon-* 针对a标签与button

    data-icon=“search” 针对input a标签以及li

    icon的种类:
    点击转至页面查看:http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html

    2) 定位图标

    您也可以规定图标定位在按钮的什么部位:顶部(top)、右侧(right)、底部(bottom)、左侧(left)。

    请使用 ui-btn-icon 属性来指定位置:ui-btn-icon-*

    <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>

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

    设置class 为 ui-btn-icon-notext

    4) 移出圆圈

    默认情况下,所有的图标都有一个灰色的圆圈。如果你不需要它,可以在元素中使用 "ui-nodisc-icon" 类:

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

    设置class 为 ui-corner-all

    6) 使用黑色图标

    设置class 为 ui-alt-icon

    5.弹窗

    创建一个弹窗,需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性, <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id, 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。

    注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。

    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>

    <div data-role="popup" id="myPopup">

    <p>这是一个简单的弹窗</p>

    </div>

    1) 添加边距

    如果你需要为弹窗添加内边距与外边距可以在 <div> 中添加 "ui-content" 类:

    2) 添加关闭按钮

    默认情况下,点击弹窗之外的区域或按下 "Esc" 键即可关闭弹窗。 如果你不想点击弹窗之外的区域关闭弹窗可以在添加上添加 data-dismissible="false" 属性(不推荐)。 你也可以在弹窗上添加关闭按钮,按钮上使用 data-rel="back" 属性,并通过样式来控制按钮的位置。

    右侧关闭:

        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
    

    左侧关闭:

        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a>
    

    data-dismissible=“false” 点击弹窗外不关闭弹窗。

    3) 定位弹窗

    默认情况下,弹窗会直接显示在点击元素的上方,如果需要控制弹窗的位置,可以在用于打开弹窗的点击链接上使用 data-position-to 属性。

    image.png

    4) 过渡

    默认情况下,弹窗是没有过渡效果的。如果你需要你可以通过 data-transition="value" 属性来添加过渡效果

    5) 弹窗对话框开口方向

    如果需要添加弹窗方向小边框,可以使用 data-arrow 属性,并指定值 "l" (左边), "t" (顶部), "r" (右边) or "b" (底部):

    <a href="#myPopup" data-rel="popup" class="ui-btn">打开弹窗</a>
    
    <div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
    
      <p>左边框的方向。</p>
    
    </div>
    

    6) 弹窗的背景覆盖

    你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。

    默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景,使用 data-overlay-theme="b" 添加深色的覆盖背景:

    <a href="#myPopup" data-rel="popup">Show Popup</a>
    
    <div data-role="popup" id="myPopup" data-overlay-theme="b">
    
      <p>在我身后有个深色背景。</p>
    
    </div>
    

    6.工具栏

    1) 头部栏

    头部栏一般包含页面标题/logo 或一两个按钮(通常是首页、选项或搜索)。

    您可以添加按钮到头部的左侧或右侧。

    头部可以包含一个或两个按钮,而尾部没有限制。

    可以使用ui-btn-left 或者ui-btn-right改变按钮的位置。

    如果是一个按钮默认在左边,俩个按钮默认一左一右。

    2) 尾部

    尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性,因此可以包含尽可能多的按钮。

    尾部的样式与头部不同(没有内边距和空间,且按钮不居中)。居中可以设置父标签内容居中。

    您还可以将尾部中的按钮进行水平或垂直组合:

    <div data-role="footer" style="text-align:center;">
    
    <div **data-role="controlgroup" data-type="horizontal"****>**
    
        <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
    
        <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
    
        <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
    
      </div>
    
    </div>
    

    3) 定位

    Inline - 默认。头部栏和尾部栏与页面内容内联。

    Fixed - 头部栏和尾部栏固定在页面的顶部和底部。

    <div data-role="header" data-position="fixed"></div>
    
    <div data-role="footer" data-position="fixed"></div>
    

    Fullscreen - 与 Fixed 定位模式基本相同,头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时,不会自动重新显示,除非点击屏幕,这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容,所以最好用在比较特殊的场合下。

    <div data-role="header" data-position="fixed" data-fullscreen="true"></div>
    
    <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
    

    相关文章

      网友评论

          本文标题:移动端框架 (2019.4.3)

          本文链接:https://www.haomeiwen.com/subject/jwpviqtx.html