mui框架（二）
1.底部导航切换界面
HTML部分:
<nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="a.html"> <span class="mui-icon mui-icon-videocam"></span> <span class="mui-tab-label">社区</span> </a> <a class="mui-tab-item" href="b.html"> <span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span> <span class="mui-tab-label">群组</span> </a> <a class="mui-tab-item" href="c.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">我的</span> </a> </nav>
JavaScript部分:
//mui初始化 mui.init(); var subpages = ['a.html', 'b.html', 'c.html']; var subpage_style = { top:'0px', bottom: '51px' }; var aniShow = {}; //创建子页面，首个选项卡页面显示，其它均隐藏； mui.plusReady(function() { var self = plus.webview.currentWebview(); for (var i = 0; i < subpages.length; i++) { var temp = {}; var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i > 0) { sub.hide(); }else{ temp[subpages[i]] = "true"; mui.extend(aniShow,temp); } self.append(sub); } }); //当前激活选项 var activeTab = subpages[0]; //选项卡点击事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); if (targetTab == activeTab) { return; } //显示目标选项卡 //若为iOS平台或非首次显示，则直接显示 if(mui.os.ios||aniShow[targetTab]){ plus.webview.show(targetTab); }else{ //否则，使用fade-in动画，且保存变量 var temp = {}; temp[targetTab] = "true"; mui.extend(aniShow,temp); plus.webview.show(targetTab,"fade-in",300); } //隐藏当前; plus.webview.hide(activeTab); //更改当前活跃的选项卡 activeTab = targetTab; }); //自定义事件，模拟点击“首页选项卡” document.addEventListener('gohome', function() { var defaultTab = document.getElementById("defaultTab"); //模拟首页点击 mui.trigger(defaultTab, 'tap'); //切换选项卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if (defaultTab !== current) { current.classList.remove('mui-active'); defaultTab.classList.add('mui-active'); } });
2.自定义事件
监听自定义事件 - 目标页
window.addEventListener('shijian',function(event){
//通过event.detail可获得传递过来的参数内容
....
var name = event.detail.namel
console.log(name);
shijian();
})
触发自定义事件 - 本页
//首先获得目标页面的对象 var targetPage = plus.webview.getWebviewById('目标页面id'); mui.fire(targetPage,'shijian',{ //自定义事件参数 name:'dongyixueyuan' });
3.页面预加载
所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。
方式一：通过mui.init方法中的preloadPages参数进行配置
mui.init({ // 可同时加载一个或者多个界面
preloadPages:[ //加载一个界面
{
url:'a.html',
id:'a',
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
},{ // 可加载另外一个界面，不需要可直接删除
url:'b.html',
id:'b',
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
]
});
方式二：通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview，则需多次调用mui.preload()方法；
mui.plusReady(function(){ var productView = mui.preload({ url: 'list.html', id: 'list', }); console.log(productView); //获得预加载界面的对象 });
4.消息框
警告消息框
mui.alert('欢迎使用Hello 东翌学院','东翌学院',function(){
alert('你刚关闭了警告框');
});
消息提示框
var btnArray = ['是','否']; mui.confirm('东翌学院是专业跨平台APP培训学院，赞？','Hello 东翌学院',btnArray,function(e){ if(e.index==0){ alert('点击了- 是'); //自己的逻辑 }else{ alert('点击了- 否'); } });
输入对话框
var btnArray = ['确定','取消']; mui.prompt('请输入你对东翌学院的评语：','内容好','东翌学院',btnArray,function(e){ if(e.index==0){ alert('点击了 - 确认'); var value = e.value; // value 为输入的内容 }else{ alert('点击了 - 取消'); } });
自动消息对话框
mui.toast('显示内容');
日期选择框
//js里的月份 是从0月开始的，也就是说，js中的0月是我们1月 var dDate=new Date(); //默认显示的时间 dDate.setFullYear(2015,5,30); var minDate=new Date(); //可选择的最小时间 minDate.setFullYear(2010,0,1); var maxDate=new Date(); //课选择的最大的时间 maxDate.setFullYear(2016,11,31); plus.nativeUI.pickDate( function(e) { var d=e.date; alert('您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate()); },function(e){ alert('您没有选择日期'); },{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
时间选择框
var dTime=new Date(); dTime.setHours(20,0); //设置默认时间 plus.nativeUI.pickTime(function(e){ var d=e.date; alert("您选择的时间是："+d.getHours()+":"+d.getMinutes()); },function (e){ alert('您没有选择时间'); },{title:"请选择时间",is24Hour:true,time:dTime});
5.原生模式ActionSheet
var btnArray = [{title:"分享到微信"},{title:"分享到新浪微博"},{title:"分享到搜狐微博"}]; //选择按钮 1 2 3 plus.nativeUI.actionSheet( { title:"分享到", cancel:"取消", // 0 buttons:btnArray }, function(e){ var index = e.index; // alert(index); switch (index){ case 1: //写自己的逻辑 break; case 2: break; } } );
6.下拉刷新
为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； 通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。两个平台实现虽有差异，但经过封装，可使用一套代码实现下拉刷新。
第一步: 创建子页面，因为拖动的其实是个子页面的整体
mui.init({ subpages:[{ url:pullrefresh-subpage-url,//下拉刷新内容页面地址 id:pullrefresh-subpage-id,//内容页面标志 styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px； .....//其它参数定义 } }] });
第二步:内容页面需按照如下DOM结构构建
<!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--数据列表--> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell">1</li> </ul> </div> </div>
第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
mui.init({ pullRefresh : { container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 down : { contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } } });
第四步:设置执行函数
function fn() { //业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //这行代码会隐藏掉 正在加载... 容器 }
7.上拉加载
第一步，第二步 和下拉刷新的一样
第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
mui.init({ pullRefresh : { container:"#pullrefresh",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等 up : { contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } } });
第四步:设置执行函数
function fn() { //业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，true表示没有更多数据了， 两个注意事项： //1、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后 // 2、注意this的作用域，若存在匿名函数，需将this复制后使用 var _this = this; _this.endPullupToRefresh(true|false); }
8.上拉下拉整合
第一步，第二步和下拉刷新一样
第三步:在mui.init()内同时设置上拉加载和下拉刷新
mui.init({ pullRefresh: { container: '#pullrefresh', down: { contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 callback: downFn // 下拉执行函数 }, up: { contentrefresh: '正在加载...', callback: upFn // 上拉执行函数 } } });
注意: 给获取元素加onclick点击事件不行，需要加addEventListener自定义事件
9.手势
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：
分类 参数描述
点击 tap 单击屏幕
doubletap 双击屏幕
长按 longtap 长按屏幕
hold 按住屏幕
release 离开屏幕
滑动 swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
拖动 dragstart 开始拖动
drag 拖动中
dragend 拖动结束
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("swipeleft",function(){
console.log("你正在向左滑动");
});
10.遮罩
在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。
遮罩蒙版常用的操作包括：创建、显示、关闭，如下代码：
var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调； mask.show();//显示遮罩 mask.close();//关闭遮罩
遮罩css样式: .mui-backdrop
11.滑动导航选择
mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格组件，这些组件都用到了mui框架的slide插件，有较多共同点。首先，Dom内容构造基本相同，都必须有一个.mui-slider的父容器；其次，当拖动切换显示内容时，均会触发slide事件（可拖动式选项卡在点击选项卡标题时，也会触发slide事件），通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
HTML部分:
<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"><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="item3" class="mui-slider-item mui-control-content"></div> </div> </div>
JavaScript部分:
var item2Show = false,item3Show = false;//子选项卡是否显示标志 document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //切换到第二个选项卡 //根据具体业务，动态获得第二个选项卡内容； var content = 'er'; //显示内容 document.getElementById("item2").innerHTML = content; //改变标志位，下次直接显示 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //切换到第三个选项卡 //根据具体业务，动态获得第三个选项卡内容； var content = 'san'; //显示内容 document.getElementById("item3").innerHTML = content; //改变标志位，下次直接显示 item3Show = true; } });
12.图片轮播
1, 支持循环
HTML部分:
<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="images/2.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div> <!--支持循环，需要重复图片节点--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/0.jpg" /></a></div> </div> </div>
2, 不支持循环 和循环不同的是没有再第一条和最后一条后面加入内容
HTML部分:
<div class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div> <!--<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>--> </div> </div>
JavaScript部分相同:
//获得slider插件对象 var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//自动轮播周期，若为0则不自动播放，默认为0； }); document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是从0开始的； alert("你正在看第"+(event.detail.slideNumber+1)+"张图片"); });
注意:如果ajax获得图片后，需要在写入图片以后，需要从新调用一下
gallery.slider();
