HTML5 极简的JS函数

页面初始化

mui框架将过多力量配置都集中在mui.init方法吃,要以某项职能,只需要在mui.init方法中做到对应参数配置即可,目前支撑在mui.init方法被配置的效益包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

于app开发被,若要运用HTML5+扩展api,必须顶plusready事件来后才会健康下,mui将拖欠事件封装成了mui.plusReady()艺术,涉及到HTML5+的api,建议都勾在mui.plusReady方法吃。如下为打印当前页面URL的言传身教:

mui.plusReady(function(){
     console.log("当前页面URL:"+plus.webview.currentWebview().getURL());
});

          

创建子页面

每当mobile
app开发过程中,经常碰到卡头卡尾的页面,此时要采用一些滚动,在android手机上会见面世滚动不流畅的题目;
mui的化解思路是:将用滚动的区域通过独立的webview实现,完全采用原生滚动。具体做法则是:将目标页面分解为主页面及情节页面,主页面显示卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面显示具体待滚动的始末,然后于主页面中调用mui.init方法初始化内容页面。

mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度,默认为100%
        height:subpage-height,//子页面高度,默认为100%
        ......
      },
      extras:{}//额外扩展参数
    }]
  });

参数说明:styles表示窗口属性,参考5+规范着之WebviewStyle;特别注意,height和width两只特性,即使不装,也默认按100%计量;因此而设置了top值为免”0px”的情,建议以安装bottom值,否则5+
runtime根据高度100%测算,可能会见招页面真实底部位置超出屏幕范围的状况;left、right同理。

示例:Hello mui的首页其实就是是index.html加list.html合并而成为的,如下:

图片 1          

index.html

+

图片 2         

list.html

=

图片 3        

统一后的首页

index.html的企图就是展示固定导航,list.html显示具体列表内容,列表项的滚是以list.html所于webview中使用原生滚动,既保证了滚动条未会见穿透顶部导航,符合app的体会,也确保了列表流畅滚动,解决了区域滚动卡顿的题材。
list.html就是index.html的子页面,创建代码比较简单,如下:

mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px;
        bottom:'0px'//默认为0px,可不定义;
      }
    }]
  });

          

开拓新页面

举行web
app,一个无法躲避的题材虽是转场动画;web是因链接构建的,从一个页面点击链接跳转至其他一个页面,如果通过发出刷新的打开方式,用户若给一个空白的页面等待;如果通过无刷新的道,用Javascript移入DOM节点(常见的SPA解决方案),会遇到很高之习性挑战:DOM节点繁多,页面太好,转场动画不通畅甚至招致浏览器崩溃;
mui的缓解思路是:单webview只承载单个页面的dom,减少dom层级与页面大小;页面切换使用原生动画,将最为耗性能的有的交给原生实现.

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度,默认为100%
      height:newpage-height,//新页面高度,默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数,可以用来处理页面间传值
    },
    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示,默认为true
      aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
      duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
    },
    waiting:{
      autoShow:true,//自动显示等待框,默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
        ......
      }
    }
})

参数说明:

  • styles表示窗口参数,参考5+规范着的WebviewStyle;特别注意,height和width两单特性,即使不安装,也默认按100%计;因此若设置了top值为无”0px”的情景,建议还要安装bottom值,否则5+
    runtime根据高度100%计算,可能会见造成页面真实底部位置超出屏幕范围之气象;left、right同理。  
  • extras:新窗口的附加扩展参数,可用来拍卖页面内传值;例如:var webview = mui.openWindow({url:'info.html',extras:{name:'mui'}});console.log(webview.name);,会输出”mui”字符串;注意:扩展参数就在开辟新窗口时有效,若目标窗口也预加载页面,则透过mui.openWindow方法打开时传递的extras参数无效。
  • createNew:是否还创建同id的webview;为优化性能、避免app中再度创建webview,mui
    v1.7.0始多createNew参数,默认为false;判断逻辑如下:若createNew为true,则免判断还,每次都新建webview;若为fasle,则优先计算时App中是不是就存在一样id的webview,若存在则一直显示;否则新创建并冲show参数执行显示逻辑;该参数可能致的影响:若业务形容于plusReady事件备受,而plusReady事件仅仅首破创时会沾,则下次更经过mui.openWindow方法打开同样webview时,是休会见又触发plusReady事件的,此时可是经过从定义事件触发;案例参考:http://ask.dcloud.net.cn/question/6514;  
  •    
    show表示窗口展示控制。autoShow:目标窗口loaded事件时有发生后,是否自动显示;若目标页面吗预加载页面,则该参数无效;aniShow表示页面显示动画,比如从右边划入、从下侧划入等,具体可参看5+规范中的AnimationTypeShow  
  • waiting代表系统等待框;mui框架在开辟新页面时等待框的拍卖逻辑吗:显示等框–>创建目标页面webview–>目标页面loaded事件产生–>关闭等待框;因此,只有当新页面也新创办页面(webview)时,会显等待框,否则如果否预加载好的页面,则一直展示目标页面,不会见来得等待框。waiting中之参数:autoShow代表自动显示等待框,默认为true,若为false,则非显得等待框;注意:若显示了等待框,但目标页面不自行显示,则需于目标页面被经如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字,options表示等待框显示参数,比如宽高、背景色、提示文字颜色相当,具体而参照5+规范着之WaitingOption。

示例1:Hello
mui中,点击首页右上比的图标,会打开关于页面,实现代码如下:

//tap为mui封装的单击事件,可参考手势事件章节
document.getElementById('info').addEventListener('tap', function() {
  //打开关于页面
  mui.openWindow({
    url: 'examples/info.html', 
    id:'info'
  });
});

坐无传到styles参数,故默认全屏显示;也尚未传来show参数,故使slide-in-right动画,新页面从右边滑入。

示例2:自打A页面打开B页面,B页面为一个欲打服务端加载的列表页面,若当B页面loaded事件产生常就是以那个形出,因服务器数据尚未加载了,列表页面也空,用户体验不好;可由此如下方式改善用户体验(最好的用户体验应该是经过预加载的法):第一步,B页面loaded事件有后,不活动显示;

//A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示;
mui.openWindow({
    url: 'B.html', 
    show:{
      autoShow:false
    }
  });

第二步,在B页面获取列表数据后,再关闭等待框、显示B页面

//B页面onload从服务器获取列表数据;
window.onload = function(){
  //从服务器获取数据
  ....
  //业务数据获取完毕,并已插入当前页面DOM;
  //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
  mui.plusReady(function(){
    //关闭等待框
    plus.nativeUI.closeWaiting();
    //显示当前页面
    mui.currentWebview.show();
  });
}

      

关门页面

mui框架拿窗口关闭功能封装于mui.back措施吃,具体执行逻辑是:

  • 比方当前webview为预加载页面,则hide当前webview;
  • 否则,close当前webview;

以mui框架中,有三种操作会触发页面关闭(执行mui.back方法):

  • 点击包含.mui-action-back好像的控件
  • 每当页面及,向右侧快速滑动
  • Android手机按下back按键

hbuilder中敲mheader变的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭时页面,原因即是为拖欠归箭头包含.mui-action-back接近,代码如下:

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">标题</h1>
</header>

假设要当届部导航栏之外的其它区域加加关闭页面的控件,只需要以对诺控件上上加.mui-action-back看似即可,如下为一个关闭按钮示例:

<button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>

mui框架封装的页面右侧滑关闭功能,默认不启用,若要用右滑关闭功能,需要在mui.init();计中安装swipeBack参数,如下:

mui.init({
    swipeBack:true //启用右滑关闭功能
});

mui框架默认会监听Android手机的back按键,然后实施页面关闭逻辑;
若不愿意mui自动处理back按键,可通过如下方式关闭mui的back按键监听;

mui.init({
    keyEventBind: {
        backbutton: false  //关闭back按键监听
    }
});

而外以上三种植操作外,也得一直调用mui.back()法,执行窗口关闭逻辑;

mui.back()只有处理窗口逻辑,若想以窗口关闭之前又处理部分外工作逻辑,则可将工作逻辑抽象成一个有血有肉函数,然后报也mui.init方法的beforeback参数;beforeback的实践逻辑吗:

  • 履beforeback参数对应之函数若返回false,则不再执行mui.back()方法;
  • 要不然(返回true或无返回值),继续执行mui.back()方法;

演示:从列表打开详情页面,从详情页面还返回后要刷新列表界面,此时可报beforeback参数,然后经由定义事件通知列表页面刷新数据,示例代码如下:

mui.init({
    beforeback: function(){
        //获得列表界面的webview
        var list = plus.webview.getWebviewById('list');
        //触发列表界面的自定义事件(refresh),从而进行数据刷新
        mui.fire(list,'refresh');
        //返回true,继续页面关闭逻辑
        return true;
    }
});

专注:beforeback的尽回来必须是合的(阻塞模式),若使用nativeUI这种异步js(非阻塞模式),则恐会见油然而生意外的结果;比如:通过plus.nativeUI.confirm()弹来肯定框,可能用户没有选择,页面已经回到了(beforeback同步施行了,无返回值,继续执行mui.back()方法,nativeUI不会阻塞js进程):在这种气象下,若一旦于定义业务逻辑,就需要复写mui.back法了;如下为一个自定义示例,每次都要用户确认后,才会关闭时页面

//备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["确定","取消"];
  mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){
    if(e.index==0){
        //执行mui封装好的窗口关闭逻辑;
        old_back();
    }
  });
}

注意:于定义关闭逻辑时,一定要是重新写mui.back,不克大概通过addEventListener增加back按键监听,
因为addEventListener只见面多新的尽逻辑,老的监听逻辑依然会履;

      

Ajax

mui框架根据htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持回到json、xml、html、text、script数据类型;
本着极简的宏图规范,mui提供了mui.ajax方法,并当mui.ajax方法基础及,进一步简化出极其常用之mui.get()、mui.getJSON()、mui.post()三只法子。

mui.ajax()方法通过HTTP请求加载远程数据,是mui框架底层Ajax的实现方式,使用办法:mui.ajax(url[,setting]),其中url表示请发送的对象地址,setting是一个json对象,支持的参数主要概括:

参数 类型 描述
data Object 发送到服务器的数据,可以是json对象或字符串
dataType String 预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;支持设置的dataType可选值:

  • "xml": 返回XML文档
  • "html": 返回纯文本HTML信息;
  • "script": 返回纯文本JavaScript代码
  • "json": 返回JSON数据
  • "text": 返回纯文本字符串
error Function 请求失败时触发的函数,该函数接收三个参数:

  • xhr:xhr实例对象,类型是XMLHttpRequest
  • type:错误描述,类型是String,可取值除了’null’外,其它可能值:"timeout", "error", "abort", "parsererror"
  • errorThrown:可捕获的异常对象,类型是String
success Function 请求成功时触发的回调函数,该函数接收三个参数:

  • data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;
  • textStatus:状态描述,参数类型是String,默认值为’success’
  • xhr:xhr实例对象,类型是XMLHttpRequest
timeout Number 请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type String 请求方式,目前仅支持’GET’和’POST’,默认为’GET’方式

代码示例:如下为通过post方式向某个服务器发送鉴权登录的代码有

mui.ajax('http://server-name/login.php',{
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒;
    success:function(data){
        //服务器返回响应,根据响应结果,分析是否登录成功;
        ...
    },
    error:function(xhr,type,errorThrown){
        //异常处理;
        console.log(type);
    }
});

mui.post()办法是对mui.ajax()的一个简化方法,直接以POST请求方式于服务器发送数据、且未处理timeout和生(若需处理非常和超时,请以mui.ajax()计),使用方式:
mui.post(url[,data][,success][,dataType]),如齐登录鉴权代码换成mui.post()后,代码更为简单,如下:

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:[{},{}]//预加载页面的子页面
    }
  ]
});

该种方案以简便、可预加载多独页面,但无见面回去预加载每个页面的援,若使赢得对应webview引用,还需要经plus.webview.getWebviewById方式获取;另外,因为mui.init是异步执行,执行完mui.init方法后马上得到对应webview引用,可能会见失败,例如如下代码:    

mui.init({
  preloadPages:[
    {
      url:'list.html',
      id:'list'
    }
  ]
});
var list = plus.webview.getWebviewByid('list');//这里可能返回空;

方二:通过mui.preload方法预加载.

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

通过mui.preload()术预加载,可马上回对应webview的援,但一样坏才能够预加载一个页面;若得加载多个webview,则用数调用mui.preload()方法;

要达到有数种植方案,各有上下,需依据现实事务场景灵活选择;

        

下拉刷新

       
为促成下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情景);        
mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的免是div,而是一个整的webview(子webview),回弹动画使用本生动画;在iOS平台,H5的动画片就比流畅,故仍以H5方案。两只阳台实现即起差距,但mui经过包装,可采取相同法代码实现下拉刷新。

主页面内容比较简单,只待创建子页面即可:

mui.init({
    subpages:[{
      url:pullrefresh-subpage-url,//下拉刷新内容页面地址
      id:pullrefresh-subpage-id,//内容页面标志
      styles:{
        top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px;
        .....//其它参数定义
      }
    }]
  });

内容页面需遵循如下DOM结构构建:

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">

    </ul>
  </div>
</div>

附带,通过mui.init方法中pullRefresh参数配置下拉刷新各项参数,如下:

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
    down : {
      contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
      contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
      contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
      callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});

说到底,根据具体事务编写刷新函数,需要注意的凡,加载了新数据后,需要执行endPulldownToRefresh()方法;

function pullfresh-function() {
     //业务逻辑代码,比如通过ajax从服务器获取新数据;
     ......
     //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
     mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
}

        

上拉加载

mui的上拉加载实现比较简单,检测5+
runtime提供的滚动长达滚动到底事件(plusscrollbottom),显示“正在加载”提示–>开始加载业务数据–>隐藏”正在加载”提示。使用方法接近下拉刷新,首先、通过mui.init方法中pullRefresh参数配置上拖累加载各项参数,如下:

mui.init({
  pullRefresh : {
    container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
    up : {
      contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
      contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
      callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});

下,根据实际业务编写加载函数,需要留意的凡,加载了新数据后,需要执行endPullupToRefresh()方法;

function pullfresh-function() {
     //业务逻辑代码,比如通过ajax从服务器获取新数据;
     ......
     //注意,加载完新数据后,必须执行如下代码,true表示没有更多数据了,两个注意事项:
     //1、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
     //2、注意this的作用域,若存在匿名函数,需将this复制后使用,参考hello mui中的代码示例;
     this.endPullupToRefresh(true|false);
}

注意:  

  • 盖运用的凡滚到底事件,因此若当前页面内容了少,没有滚动条的讲话,就非会见硌上拉加载
  • 再三上拉加载后,若曾无还多多少只是加载时,调用this.endPullupToRefresh(true);,之后滚动条滚动到底时,将不再显得“上拖累亮更多”的提示语,而著“没有再次多多少了”的提示语;
  • 只要实际业务遭,有重复触发上拉加载的急需(比如当前项目都无复多数据,但切换至另外一个品类后,应支持继续上拉加载),此时调用上拖累加载的重置函数即可,如下代码:

 

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().refresh(true);

        

输入增强

mui目前提供的输入增强包括:快速去和语音输入两宗职能。要去除输入框中的情,使用输入法键盘上之去除按键,只能挨个个勾字符,mui提供了飞去能力,只待以对承诺input控件上添加.mui-input-clear好像,当input控件被出情经常,右侧会生出一个刨除图标,点击会清空当前input的始末;另外,为了有利于高效输入,mui集成了HTML5+的语音输入,只待以对许input控件上添加.mui-input-speech类,就会以该控件右侧显示一个语音输入的图标,点击会启用科大讯飞语音输入界面。

        

开关事件

mui提供了开关控件样式,点击滑动两栽手势都可以针对开关控件进行操作,在开关控件进行切换时,会触发toggle事件,通过波的detail.isActive属性可以判定当前开关状态。可透过监听toggle事件,在开关切换时实行一定业务逻辑。如下为利用示例:

document.getElementById("mySwitch").addEventListener("toggle",function(event){
  if(event.detail.isActive){
    console.log("你启动了开关");
  }else{
    console.log("你关闭了开关");  
  }
})

比方要拿走当前开关状态,可经判断时开关控件是否含有.mui-active恍如来促成,若含,则为开拓状态,否则就算为关门状态;如下为代码示例:

var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive){
  console.log("打开状态");
}else{
  console.log("关闭状态");  
}

而用js打开、关闭开关控件,可采取switch插件的toggle()计,如下为示范代码:

mui("#mySwitch").switch().toggle();

          

slide事件

mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑行9宫格组件,这些组件都为此到了mui框架的slide插件,有于多共同点。首先,Dom内容结构基本相同,都必来一个.mui-slider的父容器;其次,当拖动切换显示内容经常,均会触发slide事件(可拖动式选项卡在点击选择项卡标题时,也会触发slide事件),通过该事件的detail.slideNumber参数可以落当前显示项之目(第一码目录为0,第二起为1,以此类推),利用该事件,可每当显示内容切换时,动态处理部分事情逻辑。

如下为一个可是拖动式选项卡示例,为提高页面加载速度,页面加载时,仅展示第一只选项卡的情节,第二、第三增选项卡内容吗空。

<div class="mui-slider">
    <!--选项卡标题区-->
    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
      <a class="mui-control-item" href="#item1">待办公文</a>
      <a class="mui-control-item" href="#item2">已办公文</a>
      <a class="mui-control-item" href="#item3">全部公文</a>
    </div>
    <div class="mui-slider-progress-bar mui-col-xs-4"></div>
    <div class="mui-slider-group">
      <!--第一个选项卡内容区-->
      <div id="item1" class="mui-slider-item mui-control-content mui-active">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">待办公文1</li>
          <li class="mui-table-view-cell">待办公文2</li>
          <li class="mui-table-view-cell">待办公文3</li>
        </ul>
      </div>
      <!--第二个选项卡内容区,页面加载时为空-->
      <div id="item2" class="mui-slider-item mui-control-content"></div>
      <!--第三个选项卡内容区,页面加载时为空-->
      <div id="item3" class="mui-slider-item mui-control-content"></div>
    </div>
  </div>

当切换到第二、第三只选项卡时,再动态获取相应内容展开展示:

var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  if (event.detail.slideNumber === 1&&!item2Show) {
    //切换到第二个选项卡
    //根据具体业务,动态获得第二个选项卡内容;
    var content = ....
    //显示内容
    document.getElementById("item2").innerHTML = content;
    //改变标志位,下次直接显示
    item2Show = true;
  } else if (event.detail.slideNumber === 2&&!item3Show) {
    //切换到第三个选项卡
    //根据具体业务,动态获得第三个选项卡内容;
    var content = ....
    //显示内容
    document.getElementById("item3").innerHTML = content;
    //改变标志位,下次直接显示
    item3Show = true;
  }
});

图表轮播、可拖动式图文表格等都只是论同样办法监听内容变更,比如我们好当图轮播界面显示当前正看之是第几摆放图片:

document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  //注意slideNumber是从0开始的;
  document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
});

          

从今定义事件

用户支付使用被见面大量以事件功能。除了浏览器内置的风波及mui框架内置的波(比如手势事件)外,mui以支持用户触发和绑定自定义事件。通过从定义事件,用户可轻松实现页面内数传递。

监听自定义事件

增补加起定义事件监听操作与标准js事件监听类似,可径直通过window对象添加,如下:

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

触发自定义事件

经过mui.fire方法可触及发目标窗口的自定义事件:

mui.fire(targetPage,'customEvent',{
  //自定义事件参数
});

示例:若果如下场景:从情报列表页面上新闻详情页面,新闻详情页面吗共同用页面,通过传递新闻ID通知详情页面需要出示具体哪个新闻,详情页面还动态为服务器请求数据,mui要兑现类似需求而经过如下步骤实现:

  •     在列表页面被预加载详情页面(假设为detail.html)  
  •    
    列表页面在点击新闻标题时,首先,获得该新闻id,触发详情页面的newsId事件,并将新闻id作为事件参数传递过去;然后又打开详情页面;  
  • 详情页面监听newsId自定义事件

 

列表页面代码如下:

//初始化预加载详情页面
mui.init({
  preloadPages:[{
    id:'detail.html',
    url:'detail.html'           
  }
  ]
});

var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  //获得详情页面
  if(!detailPage){
    detailPage = plus.webview.getWebviewById('detail.html');
  }
  //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });
//打开详情页面          
  mui.openWindow({
    id:'detail.html'
  });
});

详情页面代码如下:

//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;
  //根据id向服务器请求新闻详情
  .....
});

      

图片轮播

mui框架内置了图轮播插件,通过该插件封装的JS
API,用户可以设定是否自动轮播及轮播周期,如下为代码示例:

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});

之所以只要盼图片轮播不要自动播放,而是用户手动滑动才切换,只待经过如齐方式,将slideshowDelay参数设为0即可。

如若要跳反到第x布置图片,则好采取图片轮播插件的gotoItem方法,例如:

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片,index从0开始;

图片轮播涉及的另外一个题材:是否支持循环播放,比如有1、2、3、4季摆图纸,从第1张图从,依次向左滑动切换图片,当切换至第4布置图纸时,继续往左滑动,接下会起半点种力量:  

  • 支撑循环:左滑,直接切换到第1摆放图;
  • 匪支持循环:左滑,无反应,继续展示第4摆图,用户要使显第1张图片,必须连续为右侧滑动切换至第1摆放图纸;

 
当显第1摆设图片时,继续右滑是否出示第4摆图纸,是同等问题;这个题材之兑现用经过.mui-slider-loop类似以及DOM节点来控制;若不支持循环,代码比较简单,如下:

 

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>

设若使支持循环,则要在.mui-slider-group节点上多.mui-slider-loop接近,同时用重多2摆设图纸,图片顺序变为:4、1、2、3、4、1,代码示例如下:

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循环,需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支持循环,需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>

注意:mui框架会默认初始化当前页面的图形轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取之营销信息),则要在动态DOM生成后,手动调用图片轮播的初始化方法;代码如下:  

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});

      

侧滑导航

mui提供了有限种植侧滑导航实现:webview模式和div模式,两栽模式各起优劣,适用于不同之观。

webview模式

主页面和菜单内容以不同的webview中,两单页面根据情节要求分别组织DOM结构,mui对其DOM结构无特殊要求,故该有如下优点:

  • 食谱内容是独自的webview,故然于多独页面复用;
  • 食谱内容在单独的webview中,菜单区域之滚动不影响主界面,故可利用原生滚动,滚动更为流畅;

单,webview模式也产生其短:

  • 未支持拖动手势(跟手拖动);
  • 主页面、菜单不同webview实现,因此一旦需相互(如:点击菜单触发主页面内容变更),需利用从定义事件实现跨webview通讯;

div模式

   
主页面和菜单内容以同一个webview下,嵌套在一定组织的div中,通过div的倒动画模拟菜单移动;故该模式有如下优点:   

  • 支撑拖动手势(跟手拖动);
  • 主页面、菜单以一个页面中,可透过JS轻松实现两头相互(如:点击菜单触发主页面内容变更),没有跨webview通讯的烦心;

单向,div模式呢发那症结:

  • 莫支持菜单内容以差不多页面的复用,需每个页面还转移对应之菜系节点;
  • 主界面和菜单内容的轮转互不影响,因此会采取div区域滚动,在低端Android手机且滚动内容比较多时,可能会见有些显卡顿;

div模式支持不同之卡通效果,每种动画效果待遵守不同的DOM构造;下面我们以右手滑菜单呢条例(左滑菜单就需用菜单父节点上的mui-off-canvas-left换成mui-off-canvas-right即可),说明每种动画对应的DOM结构。

动画1:主界面移动、菜单不动

<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
        ...
      <div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        ...
      </div>
    </div>  
  </div>
</div>

动画片2:主界面不动、菜单移动  

该种动画要求的DOM结构及动画1之DOM结构基本相同,唯一差别就是索要以倾斜滑导航根容器class上加一个mui-slide-in

卡通3:主界面、菜单以活动  

该种动画要求的DOM结构比较突出,需用菜单容器在主页面容器之下

<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
     <!-- 菜单容器 -->
    <aside class="mui-off-canvas-left">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <!-- 菜单具体展示内容 -->
          ...
        <div>
      </div>
    </aside>
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <!-- 主页面内容容器 -->
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        ...
      </div>
    </div>  
  </div>
</div>

mui支持多智展示div模式之侧滑菜单:1、在主界面向右拖动(drag);2、点击含有mui-action-menu恍如的控件;3、Android手机按menu键;4、通过JS
API触发,如下:

mui('.mui-off-canvas-wrap').offCanvas('show');

平等,mui支持多主意关闭div模式的侧滑菜单:1、在大哥大屏幕及恣意位置为左拖动(drag);2、点击主界面内任意位置;3、Android手机按menu键;4、Android手机按back键;5、通过JS
API触发,如下:

mui('.mui-off-canvas-wrap').offCanvas('close');

      

弹来菜谱

mui框架内置了弹有菜谱插件,弹出菜单显示内容未限定,但不能不包裹于一个暗含.mui-popover好像的div中,如下即为一个弹出菜单内容:

<div id="popover" class="mui-popover">
  <ul class="mui-table-view">
    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
  </ul>
</div>

万一显得、隐藏如上菜单,mui推荐使用锚点方式,例如:

<a href="#popover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>

点击如达到定义的按钮,即可显示弹来菜谱,再次点击弹出菜谱之外的外区域,均只是关闭弹来菜谱;这种利用方式最好简练。

使想通过js的计决定弹有菜谱,则透过如下一个术即可:

//传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui('.mui-popover').popover('toggle');

        

遮罩蒙版

在popover、侧滑菜单等界面,经常会就此到蒙版遮罩;比如popover弹出后,除popover控件外的旁区域都见面遮罩一交汇蒙版,用户点击蒙版不见面触发蒙版下方的逻辑,而会关闭popover同时关闭蒙版;再按侧滑菜单界面,菜单划有后,除侧滑菜单之外的别样区域还见面遮罩一交汇蒙版,用户点击蒙版会关闭侧滑菜单以关闭蒙版。      

遮罩蒙版常用之操作包括:创建、显示、关闭,如下代码:

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调;
mask.show();//显示遮罩
mask.close();//关闭遮罩

注意:闭馆遮罩仅会倒闭,不见面销毁;关闭后好还调用mask.show();开拓遮罩;

mui默认的蒙版遮罩使用.mui-backdrop类定义(如下代码),若得从定义遮罩效果,只待覆盖定义.mui-backdrop即可;

.mui-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0,0,0,.3);
}

相关文章