今天也是我接触mui的第一天。首先先上MUI的官网上面瞧一瞧。http://dev.dcloud.net.cn/mui/window/#closewindow我这里上的不是官网,php
我是先把他的基本能实现的功能先作了一个简单的了解。下面你们跟着我看:css
1、Mui的组件html
mui的组件都很原生好比拓展阅读,操做表,折叠面板,你须要那个组件就把那个组件拷贝下来,例如你须要折叠面板html5
还有单选框,轮播图,数字角标,消息框,卡片视图,透明状态栏,右滑,左滑,等等组件,再将你想要使用的模板复制下来,粘贴到你想要想放进去的地方便可。
2、MUI的窗口
<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui-collapse-content"> <p>面板1子内容</p> </div> </li> </ul>
MUI的窗口包括页面的初始化,建立子页面,打开新页面,打开带原声带导航栏的新页面,关闭页面,预加载等。
无论你是打一个新页面仍是建立一个新页面它里面都会夹杂着你想要的动画效果,好比下拉刷新,下拉刷新打开一个新页面。
下面拿着页面初始化来举一个例子:
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。以下为打印当前页面URL的示例:
mui.plusReady()
mui.plusReady(function(){ console.log("当前页面URL:"+plus.webview.currentWebview().getURL()); });
mui.init()
mui插件初始化jquery
mui.ready()
当DOM准备就绪时,指定一个函数来执行。android
在mobile app开发过程当中,常常会出现共用的导航栏或者选项卡,每次打开页面都须要从新渲染,并且容易出现卡头卡尾的现象。而且此时若使用局部滚动,在android手机上会出现滚动不流畅的问题;ios
mui如今提供两种解决方案:
第一种(官方推荐):在plus环境下,使用原生titleNView以及原生tabbar来替换页面的导航栏或者选项卡。在页面打开时,渲染已经完成,让你的应用更接近原生app。具体作法:原生titleNView参考mui.openWindow
的示例3,原生tabbar示例参考ask教程示例
第二种:经过双webview模式解决,此种状况适用于须要上下拉刷新的列表页面。将须要滚动的区域经过单独的webview实现,彻底使用原生滚动。web
具体作法则是:将目标页面分解为主页面和内容页面,主页面显示卡头卡尾区域,好比顶部导航、底部选项卡等;内容页面显示具体须要滚动的内容,而后在主页面中调用mui.init方法初始化内容页面。ajax
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"的状况,json
建议同时设置bottom值,不然5+ runtime根据高度100%计算,可能会形成页面真实底部位置超出屏幕范围的状况;left、right同理。
作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;
createNew参数为为fasle,则先查找当前App中是否已存在一样id的webview,若存在则直接显示;不然新建立并根据show参数执行显示逻辑;
注意:plusReady事件仅在webview首次建立时触发,使用mui.openWindow
方法屡次打开已存在的一样id的webview时,是不会重复触发plusReady事件的; 所以若业务写在plusReady事件中,可能会出现执行结果和预期不一致的状况;此时可经过自定义事件触发; 案例参考:mui.plusReady有时会失效;
show
窗口显示控制参数,具体参数以下:
autoShow:目标窗口loaded事件发生后,是否自动显示,默认为true;若为false,则仅建立但不显示webview;若目标页面为预加载页面,则该参数无效;
aniShow表示页面显示动画,好比从右侧划入、从下侧划入等,具体可参考5+规范中的AnimationTypeShow
duration:显示Webview窗口动画的持续时间,单位为ms
waiting
系统等待框参数
mui框架在打开新页面时等待框的处理逻辑为:
显示等待框-->建立目标页面webview-->目标页面loaded事件发生-->关闭等待框;
所以,只有当新页面为新建立页面(webview)时,会显示等待框,不然若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的具体参数:
autoShow:是否自动显示等待框,默认为true;若为false,则不显示等待框;注意:若waiting框的autoShow为true,但目标页面不自动显示,则需在目标页面中经过以下代码关闭等待框: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(); }); }
3、MUI的事件
mui的事件包括事件绑定,事件取消,事件触发,手势事件。自定义事件。
除了可使用addEventListener()
方法监听某个特定元素上的事件外, 也可使用.on()
方法实现批量元素的事件绑定。
点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,而后打开新闻详情页面
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){ //获取id var id = this.getAttribute("id"); //传值给详情页面,通知加载新数据 mui.fire(detail,'getDetail',{id:id}); //打开新闻详情 mui.openWindow({ id:'detail', url:'detail.html' }); })
使用on()
方法绑定事件后,若但愿取消绑定,则可使用off()
方法。 off()
方法根据传入参数的不一样,有不一样的实现逻辑。
off(event,selector,handle)
适用于取消对应选择器上特定事件所执行的特定回调,例如:
//点击li时,执行foo_1函数 mui("#list").on("tap","li",foo_1); //点击li时,执行foo_2函数 mui("#list").on("tap","li",foo_2); function foo_1(){ console.log("foo_1 execute"); } function foo_2(){ console.log("foo_2 execute"); } //点击li时,再也不执行foo_1函数,但会继续执行foo_2函数 mui("#list").off("tap","li",foo_1);
off(event,selector)
适用于取消对应选择器上特定事件的全部回调,例如:
//点击li时,执行foo_1函数 mui("#list").on("tap","li",foo_1); //点击li时,执行foo_2函数 mui("#list").on("tap","li",foo_2); function foo_1(){ console.log("foo_1 execute"); } function foo_2(){ console.log("foo_2 execute"); } //点击li时,foo_二、foo_2两个函数均再也不执行 mui("#list").off("tap","li");
off(event)
适用于取消当前元素上绑定的特定事件的全部回调,例如:
//点击li时,执行foo_1函数 mui("#list").on("tap","li",foo_1); //点击p时,执行foo_3函数 mui("#list").on("tap","p",foo_3); function foo_1(){ console.log("foo_1 execute"); } function foo_3(){ console.log("foo_3 execute"); } //点击li时,再也不执行foo_1函数;点击p时,也再也不执行foo_3函数 mui("#list"
off()
适用于取消当前元素上绑定的全部事件回调,例如:
//点击li时,执行foo_1函数 mui("#list").on("tap","li",foo_1); //双击li时,执行foo_4函数 mui("#list").on("doubletap","li",foo_4); //点击p时,执行foo_3函数 mui("#list").on("tap","p",foo_3); function foo_1(){ console.log("foo_1 execute"); } function foo_3(){ console.log("foo_3 execute"); } function foo_4(){ console.log("foo_4 execute"); } //点击li时,再也不执行foo_1函数;点击p时,也再也不执行foo_3函数;双击li时,也再也不执行foo_4函数; mui("#list").off();
使用mui.trigger()
方法能够动态触发特定DOM元素上的事件。
自动触发按钮的点击事件:
var btn = document.getElementById("submit"); //监听点击事件 btn.addEventListener("tap",function () { console.log("tap event trigger"); }); //触发submit按钮的点击事件 mui.trigger(btn,'tap');
在开发移动端的应用时,会用到不少的手势操做,好比滑动、长按等,为了方便开放者快速集成这些手势,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开关
单个元素上的事件监听,直接使用addEventListener()
便可,以下:
console.log("你正在向左滑动"); });
若多个元素执行相同逻辑,则建议使用事件绑定(on()
)。
在App开发中,常常会遇到页面间传值的需求,好比重新闻列表页进入详情页,须要将新闻id传递过去; Html5Plus规范设计了evalJS方法来解决该问题; 但evalJS方法仅接收字符串参数,涉及多个参数时,须要开发人员手动拼字符串; 为简化开发,mui框架在evalJS方法的基础上,封装了自定义事件,经过自定义事件,用户能够轻松实现多webview间数据传递。
由于是多webview之间传值,故没法在手机浏览器、微信中使用;
添加自定义事件监听操做和标准js事件监听相似,可直接经过window对象添加,以下:
window.addEventListener('customEvent',function(event){ //经过event.detail可得到传递过来的参数内容 .... });
触发自定义事件
经过mui.fire()
方法可触发目标窗口的自定义事件:
若新建立一个webview,不等该webview的loaded事件发生,就当即使用webview.evalJS()或mui.fire(webview,'eventName',{}),则可能无效;案例参考:这里
假设以下场景:重新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,经过传递新闻ID通知详情页面须要显示具体哪一个新闻,详情页面再动态向服务器请求数据,mui要实现相似需求可经过以下步骤实现:
列表页面代码以下:
//初始化预加载详情页面 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向服务器请求新闻详情 ..... });
4、MUI的utils(工具)
mui的工具和jq很像可是也是有区别的。
mui框架将不少功能配置都集中在mui.init方法中,要使用某项功能,只须要在mui.init方法中完成对应参数配置便可,目前支持在mui.init方法中配置的功能包括:建立子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。
mui.init({ //子页面 subpages: [{ //... }], //预加载 preloadPages:[ //... ], //下拉刷新、上拉加载 pullRefresh : { //... }, //手势配置 gestureConfig:{ //... }, //侧滑关闭 swipeBack:true, //Boolean(默认false)启用右滑关闭功能 //监听Android手机的back、menu按键 keyEventBind: { backbutton: false, //Boolean(默认true)关闭back按键监听 menubutton: false //Boolean(默认true)关闭menu按键监听 }, //处理窗口关闭前的业务 beforeback: function() { //... //窗口关闭前处理其余业务详情点击 ↑ "关闭页面"连接查看 }, //设置状态栏颜色 statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用 preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 })
经过statusBarBackground:rgb
属性设置状态栏颜色(iOS7.0+、安卓不支持)格式为#RRGGBB。
mui.init({ statusBarBackground: '#9defbcg', })
mui默认会监听Android手机的物理按键(back&menu)
,若不但愿自动处理按键可经过如下方式关闭
mui.init({ //监听Android手机的back、menu按键 keyEventBind: { backbutton: true, //Boolean(默认true)关闭back按键监听 menubutton: true //Boolean(默认true)关闭menu按键监听 }, })
代码块激活字符:
mui使用css选择器获取HTML元素,返回mui对象数组。mui("p")
:选取全部<p>
元素mui("p.title")
:选取全部包含.title
类的<p>
元素
若要将mui对象转化成dom对象,可以使用以下方法(相似jquery对象转成dom对象):
//obj1是mui对象 var obj1 = mui("#title"); //obj2是dom对象 var obj2 = obj1[0];
MUI框架的定位是“最接近原生体验的移动App的UI框架”, 所以和jQuery有所区别,不多为简化DOM操做而封装API,具体可参考MUI产品概述; 该函数的设计目的,更可能是为了配合MUI插件使用,好比图片轮播、下拉刷新、区域滚动等,以下为详细示例:
示例1:跳转到图片轮播的第二张图片
mui('.mui-slider').slider().gotoItem(1);
示例2:从新开启上拉加载
mui('#pullup-container').pullRefresh().refresh(true);
代码块激活字符:
each既是一个类方法,同时也是一个对象方法,两个方法适用场景不一样;换言之,你可使用mui.each()
去遍历数组或json对象,也可使用mui(selector).each()
去遍历DOM结构。
this
关键字代替
输出当前数组中每一个元素的平方
var array = [1,2,3] mui.each(array,function(index,item){ console.log(item*item); })
当前页面中有三个字段,以下:
<div class="mui-input-group"> <div class="mui-input-row"> <label>字段1:</label> <input type="text" class="mui-input-clear" id="col1" placeholder="请输入"> </div> <div class="mui-input-row"> <label>字段2:</label> <input type="text" class="mui-input-clear" id="col2" placeholder="请输入"> </div> <div class="mui-input-row"> <label>字段3:</label> <input type="text" class="mui-input-clear" id="col3" placeholder="请输入"> </div> </div>
提交时校验三个字段均不能为空,若为空则提醒并终止业务逻辑运行,使用each()
方法循环校验,以下:
var check = true; mui(".mui-input-group input").each(function () { //若当前input为空,则alert提醒 if(!this.value||trim(this.value)==""){ var label = this.previousElementSibling; mui.alert(label.innerText+"不容许为空"); check = false; return false; } }); //校验经过,继续执行业务逻辑 if(check){ //..... }
代码块激活字符:
将两个对象合并成一个对象。
var target = { company:"dcloud", product:{ mui:"小巧、高效" } } var obj1 = { city:"beijing", product:{ HBuilder:"飞同样的编码" } } mui.extend(target,obj1); //输出:{"company":"dcloud","product":{"HBuilder":"飞同样的编码"},"city":"beijing"} console.log(JSON.stringify(target));
从如上输出能够看到,product节点下的mui被替换成了HBuilder,由于默认仅合并对象根节点下的key、value;若是想深度合并,则能够传入deep
参数,以下:
var target = { company:"dcloud", product:{ mui:"小巧、高效" } } var obj1 = { city:"beijing", product:{ HBuilder:"飞同样的编码" } } //支持深度合并 mui.extend(true,target,obj1); //输出:{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞同样的编码"},"city":"beijing"} console.log(JSON.stringify(target));
代码块激活字符:
setTimeOut封装
代码块激活字符:
滚动窗口屏幕到指定位置,该方法是对window.scrollTo()
方法在手机端的加强实现,可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小,该方法仅可实现屏幕纵向滚动。
1秒钟以内滚动到页面顶部
mui.scrollTo(0,1000);
代码块激活字符:
咱们常常会有经过navigator.userAgent
判断当前运行环境的需求,mui对此进行了封装,经过调用mui.os.XXX便可
检测是否为iOS或安卓系统版本是否小于4.4
if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){ //... }
工具的使用和通常的jq调用很相似也就是方法的区别,能够也是能够很容易就上手的。
5、MUI的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([settings])
方法
headers:{'Content-Type':'application/json'}
content-type("application/x-www-form-urlencoded")
,
data
参数中传入的非字符串类型的数据转变为
key1=value&key2=value2
格式的查询串;
processData
为
false
代码示例:以下为经过post方式向某服务器发送鉴权登陆的代码片断
mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; headers:{'Content-Type':'application/json'}, 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){ //得到服务器响应 ... } );
6、MUI的下拉刷新
为实现下拉刷新功能,大多数 H5 框架都是经过 DIV 模拟下拉回弹动画,在低端 android 手机上,DIV 动画常常出现卡顿现象(特别是图文列表的状况); mui 经过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问题,而且拖动效果更加流畅;
这里提供两种模式的下拉刷新,以适用不一样场景:
下拉刷新时,触发的是原生下拉刷新控件,而整个webview
位置不会发生变化,因此不会在拖动过程当中发生DOM重绘,当控件拖动到必定位置触发动态加载数据以及刷新操做。此模式下拉刷新,相比双webview 模式,不建立额外 webview,性能更优。
mui 初始化时设置pullRefresh
各项参数,与双 webview 模式的子页面设置是同样的。
mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器都可,好比:id、.class等 down : { style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式 color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色 height:'50px',//可选,默认50px.下拉刷新控件的高度, range:'100px', //可选 默认100px,控件可下拉拖拽的范围 offset:'0px', //可选 默认0px,下拉刷新控件的起始位置 auto: true,//可选,默认false.首次加载自动上拉刷新一次 callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,好比经过ajax从服务器获取新数据; } } });
使用双 webview 模式的下拉刷新,建立一个子 webview 添加列表;拖动时,拖动的是一个完整的 webview,避免了相似 DIV 拖动流畅度很差的问题,回弹动画使用原生动画;在 iOS 平台,H5 的动画已经比较流畅,故依然使用 H5 方案。两个平台实现虽有差别,但 mui 通过封装,可以使用一套代码实现下拉刷新。
主页面内容比较简单,只须要建立子页面便可:
mui.init({ subpages:[{ url:pullrefresh-subpage-url,//下拉刷新内容页面地址 id:pullrefresh-subpage-id,//内容页面标志 styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px; .....//其它参数定义 } }] });
iOS平台的下拉刷新,使用的是 mui 封装的区域滚动组件, 为保证两个平台的 DOM 结构一致,内容页面需统一按照以下 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 : { height:50,//可选,默认50.触发下拉刷新拖动距离, auto: true,//可选,默认false.首次加载自动下拉刷新一次 contentdown : "下拉能够刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 contentover : "释放当即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,好比经过ajax从服务器获取新数据; } } });
下拉刷新组件滚动到特定位置的方法相似区域滚动组件
示例:在 hello mui 下拉刷新示例中,实现了双击标题栏,让列表快速回滚到顶部的功能;代码以下:
var contentWebview = null; //监听标题栏的双击事件 document.querySelector('header').addEventListener('doubletap',function () { if(contentWebview==null){ contentWebview = plus.webview.currentWebview().children()[0]; } //内容区滚动到顶部 contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)"); });
*能够解决修改下拉刷新子页面默认top
值后,下拉刷新提示框位置异常问题
根据实际需求在父页面给mui-content设置top属性
.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{ top: 180px !important; }
mui 支持设置首次加载时自动触发一次下拉刷新,配置以下auto
参数为:true
便可,上拉加载一样支持此配置
mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器都可,好比:id、.class等 down : { auto: true,//可选,默认false.首次加载自动下拉刷新一次 }, up : { auto: true //可选,默认false.首次加载自动上拉加载一次 } } });
两种模式在下拉刷新过程当中,当获取新数据后,都须要执行 endPulldown
方法, 该方法的做用是关闭“正在刷新”的样式提示,内容区域回滚顶部位置,以下:
function pullfresh-function() { //业务逻辑代码,好比经过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行以下代码,注意:若为ajax请求,则需将以下代码放置在处理完ajax响应数据以后 //没有更多内容了,endPulldown 传入true, 再也不执行下拉刷新 mui('#refreshContainer').pullRefresh().endPulldown(); }
7、MUI的上拉加载
mui的上拉加载和下拉刷新相似,都属于pullRefresh
插件,使用过程以下:
开发者只需关心业务逻辑,实现加载更多数据便可。
初始化方法相似下拉刷新,经过mui.init方法中pullRefresh参数配置上拉加载各项参数,以下:
mui.init({ pullRefresh : { container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器都可,好比:id、.class等 up : { height:50,//可选.默认50.触发上拉加载拖动距离 auto:true,//可选,默认false.自动上拉加载一次 contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容; callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,好比经过ajax从服务器获取新数据; } } });
加载完新数据后,须要执行endPullupToRefresh()方法,结束转雪花进度条的“正在加载...”过程
示例:
function pullfresh-function() { //业务逻辑代码,好比经过ajax从服务器获取新数据; ...... //注意: //一、加载完新数据后,必须执行以下代码,true表示没有更多数据了: //二、若为ajax请求,则需将以下代码放置在处理完ajax响应数据以后 this.endPullupToRefresh(true|false); }
若部分业务中,有从新触发上拉加载的需求(好比当前类别已无更多数据,但切换到另一个类别后,应支持继续上拉加载),此时调用.refresh(true)
方法,可重置上拉加载控件,以下代码:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数; //注意:refresh()中需传入true mui('#pullup-container').pullRefresh().refresh(true);
在部分场景下但愿禁用上拉加载,好比在列表数据过少时,不想显示“上拉显示更多”、“没有更多数据”的提示语,开发者能够经过调用disablePullupToRefresh()
方法实现相似需求,代码以下:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数; mui('#pullup-container').pullRefresh().disablePullupToRefresh();
使用disablePullupToRefresh()
方法禁用上拉加载后,可经过enablePullupToRefresh()
方法再次启用上拉加载,代码以下:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数; mui('#pullup-container').pullRefresh().enablePullupToRefresh();
8、MUI的代码块
MUI的代码块有js代码块,有html的代码块详情看看我发给大家的连接。下面咱们进入开发阶段,第一步能够上官网拷贝下来一个demo,打开HBuilder新建一个移动APP项目,选择MUI框架,粘贴你的代码运行便可。
部分mui控件监听的事件没法经过
mui.trigger
触发好比没法实现自动触发mui返回图标,实现关闭当前页面的功能,该部分逻辑正在优化中