HTML5技术

HTML5 极简的JS函数 - zxh91989(4)

字号+ 作者:H5之家 来源:H5之家 2017-12-07 12:10 我要评论( )

mui . post ( 'http://server-name/login.php' ,{ username : 'username' , password : 'password' }, function ( data ){ //服务器返回响应,根据响应结果,分析是否登录成功; ... }, 'json' ); mui.get()方法和m

mui.post('http://server-name/login.php',{ username:'username', password:'password' },function(data){ //服务器返回响应,根据响应结果,分析是否登录成功; ... },'json' );

mui.get()方法和mui.post()方法类似,只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.get(url[,data][,success][,dataType]),如下为获得某服务器新闻列表的代码片段,服务器以json格式返回数据列表

mui.get('http://server-name/list.php',{category:'news'},function(data){ //获得服务器响应 ... },'json' );

如上mui.get()方法和如下mui.ajax()方法效果是一致的:

 

mui.ajax('http://server-name/list.php',{ data:{ category:'news' }, dataType:'json',//服务器返回json格式数据 type:'get',//HTTP请求类型 success:function(data){ //获得服务器响应 ... } });

mui.getJSON()方法是在mui.get()方法基础上的更进一步简化,限定返回json格式的数据,其它参数和mui.get()方法一致,使用方法: mui.get(url[,data][,success]),如上获得新闻列表的代码换成mui.getJSON()方法后,更为简洁,如下:

mui.getJSON('http://server-name/list.php',{category:'news'},function(data){ //获得服务器响应 ... } );

          

手势事件

在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:

分类参数描述

点击 tap 单击屏幕

doubletap 双击屏幕

长按 longtap 长按屏幕

hold 按住屏幕

release 离开屏幕

滑动 swipeleft 向左滑动

swiperight 向右滑动

swipeup 向上滑动

swipedown 向下滑动

拖动 dragstart 开始拖动

drag 拖动中

dragend 拖动结束

      

手势事件配置

根据使用频率,mui默认会监听部分手势事件,如点击、滑动事件;为了开发出更高性能的moble App,mui支持用户根据实际业务需求,通过mui.init方法中的gestureConfig参数,配置具体需要监听的手势事件,。

mui.init({ gestureConfig:{ tap: true, //默认为true doubletap: true, //默认为false longtap: true, //默认为false swipe: true, //默认为true drag: true, //默认为true hold:false,//默认为false,不监听 release:false//默认为false,不监听 } });

注意:dragstart、drag、dragend共用drag开关,swipeleft、swiperight、swipeup、swipedown共用swipe开关

事件监听

同标准click事件一样,上述手势事件支持添加到任意DOM对象上,如下为一个示例:

elem.addEventListener("swipeleft",function(){ console.log("你正在向左滑动"); });

        

预加载

所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。mui提供两种方式实现页面预加载。

方式一:通过mui.init方法中的preloadPages参数进行配置.

mui.init({ preloadPages:[ { url:prelaod-page-url, id:preload-page-id, styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ] });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5知识点:简析正则表达式 - 千千小助

    html5知识点:简析正则表达式 - 千千小助

    2017-12-02 08:02

  • html5知识点:CSS3新增选择器 - 千千小助

    html5知识点:CSS3新增选择器 - 千千小助

    2017-11-30 09:00

  • 推荐10个适合初学者的 HTML5 入门教程 - 赵一航

    推荐10个适合初学者的 HTML5 入门教程 - 赵一航

    2017-11-27 08:03

  • html5知识点:HTML5新特性 - 千千小助

    html5知识点:HTML5新特性 - 千千小助

    2017-11-24 18:00

网友点评
p