工欲其事必先利其器
HBuilder X 工具下载
http://www.dcloud.io/hbuilderx.html
先把mui的使用文档放在这里:http://dev.dcloud.net.cn/mui/window/
http://dev.dcloud.net.cn/mui/event/
http://www.dongyi100.com/doc/mui_h5plus/
http://dev.dcloud.net.cn/mui/ui/#grid
http://dev.dcloud.net.cn/mui/event/#trigger
这个文档值得参考
http://ask.dcloud.net.cn/docs
http://www.html5plus.org/doc/zh_cn/push.html
先说说开发APP使用的工具 HBuilder 这个软件集成了 mui ,那么如何使用呢?
代码块编写
http://dev.dcloud.net.cn/mui/window/
minit 页面初始化
misubpage 创建子页面
mopenwindow 打开新页面
mback 返回
mmon 事件绑定
mmoff 事件取消
mmtriger 事件触发
var btn = document.getElementById("submit"); //监听点击事件 btn.addEventListener("tap",function () { console.log("tap event trigger"); }); //触发submit按钮的点击事件 mui.trigger(btn,'tap');
mlater 等候多长时间执行一次
mscrollto 滚动到
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,//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } })
mui提供的工具方法:
mui() css 选择器
each() 遍历
mui.extend()
合并两个或多个对象
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));
支持深度合并
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));
later(func,delay) 对 setTimeout的封装
对系统部分参数的获取:
mui.os 进行了封装
我们经常会有通过navigator.userAgent判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可
plus(可以访问的参数为:)
.plus
返回是否在 5+ App(包括流应用)运行
.stream
返回是否为流应用
Android(可以访问的参数为:)
.android
返回是否为安卓手机
.version
安卓版本号
.isBadAndroid
android非Chrome环境
iOS(可以访问的参数为:)
.ios
返回是否为苹果设备
.version
返回手机版本号
.iphone
返回是否为苹果手机
.ipad
返回是否为ipad
Wechat(可以访问的参数为:)
返回是否在微信中运行
示例
检测是否为iOS或安卓系统版本是否小于4.4
代码块提示:
http://dev.dcloud.net.cn/mui/snippet/#html
新建一个项目 新建 APP项目 ,自动包含 mui 的一些css js font 库。
这里还有个一配置文件:manifest.json
项目初始化:
mui.init();
//页面准备好,以后执行代码 plusReady
<script> mui.plusReady(function(){ var url=plus.webview.currentWebview().getURL(); alert(url); }); </script>
file:///mnt/sdcard/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/index.html at index.html:31
<script> mui.plusReady(function(){ var url=plus.webview.currentWebview(); //现在就是一个对象 url对象 console.log(url); }); </script>
下载图片到本地:
http://ask.dcloud.net.cn/article/807
其他帮助分享功能连接地址
http://ask.dcloud.net.cn/feature/6
创建子页面
当我们的页面需要上拉刷新 下拉加载的时候我们创建子页面,其他页面不需要
新建创建一个含有mui的页面,我们起名叫 child.html
父页面的js中写入
mui.init({ subpages:[{ url:"child.html",//子页面HTML地址,支持本地地址和网络地址 id:"1",//子页面标志 styles:{ top:"44px",//子页面顶部位置 高度和宽度是带有px的,否则不生效 bottom:"50px",//子页面底部位置 //width:subpage-width,//子页面宽度,默认为100% //height:subpage-height,//子页面高度,默认为100% //...... }, extras:{ name:"我的第一个子页面" }//额外扩展参数 }] });
父页向子页面传递参数如何做? 这个代码是写在child.html子页面中的
mui.plusReadly(function(){ var self=plus.webview.currentWebview(); console.log(self.name); });
打开新页面
页面之间是如何传递参数的,
show是做什么用的? 打开页面显示的效果,是否立即打开?以及页面打开的样式
立即打开这是说什么呢,就是页面需要加载多项内容,不能及时加载,因此显示出等待框
warting 是否自动显示 options 这里可以使用css控制等待框的大小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> </head> <body> <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> <div class="mui-content"> <button id="btn">打开新页面</button> </div> <script type="text/javascript" charset="UTF-8"> mui.init(); mui.plusReady(function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ //打开新窗口 mui.openWindow({ url:'newpage.html', //需要打开页面的url地址 id:'newpage', //需要打开页面的url页面id styles:{ top:'0px',//新页面顶部位置 bottom:'0px',//新页面底部位置 //width:newpage-width,//新页面宽度,默认为100% //height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ name:'aries', age:'18', //.....//自定义扩展参数,可以用来处理页面间传值 },show:{ //控制打开页面的类型 autoShow:true, ////页面loaded事件发生后自动显示,默认为true aniShow:'zoom-fade-out',//页面显示动画,默认为”slide-in-right“; 页面出现的方式 左右上下 duration:'350'//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; }, waiting:{ // 控制 弹出转圈框的信息 autoShow:true,//自动显示等待框,默认为true title:'数据加载中...',//等待对话框上显示的提示内容 options:{ background:"rgba(0,0,0,1)", //width:'300px',//等待框背景区域宽度,默认根据内容自动计算合适宽度 //height:'300px',//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } }); } }); </script> </body> </html>
子页面使用
mui.plusReady(function(){ var self=mui.webview.currentWebview(); alert(self.name); alert(self.age); });
上述可以获取到值,完成页面的传递
//跳转到新页面的时候,我们需要加载数据,因此点击打开新页面时候,
我们让他显示等待框,且把show 中的autoShow改成false
什么意思呢?就是打开页面的时候,信息加载的过程中显示等待框,
需要信息加载完毕后,再打开页面
代码如下:
mui.plusReady(function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ //打开新窗口 mui.openWindow({ url:'newpage.html', //需要打开页面的url地址 id:'newpage', //需要打开页面的url页面id styles:{ top:'0px',//新页面顶部位置 bottom:'0px',//新页面底部位置 //width:newpage-width,//新页面宽度,默认为100% //height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ name:'aries', age:'18', //.....//自定义扩展参数,可以用来处理页面间传值 },show:{ //控制打开页面的类型 autoShow:false, ////页面loaded事件发生后自动显示,默认为true aniShow:'zoom-fade-out',//页面显示动画,默认为”slide-in-right“; 页面出现的方式 左右上下 duration:'350'//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; }, waiting:{ // 控制 弹出转圈框的信息 autoShow:true,//自动显示等待框,默认为true title:'数据加载中...',//等待对话框上显示的提示内容 options:{ background:"rgba(0,0,0,1)", //width:'300px',//等待框背景区域宽度,默认根据内容自动计算合适宽度 //height:'300px',//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } }); } });
代码改成这样以后,点击按钮,就只显示加载中了
那么打开的newpage.html 这个页面准备完成后,如何打开新页面呢?
数据加载完毕后,打开新页面分成两个步骤:
mui.plusReady(function(){ //这是页面数据加载完以后,触发的一个函数, //因此我们把代码写在这里 //1、关闭等待框 plus.nativeUI.closeWaiting(); //那么有关闭就有打开等待框 plus.nativeUI.openWaiting("加载中..."); //2、显示页面 var self=plus.webview.currentWebview(); self.show("zoom-fade-out",350); //这个shou 有两个参数 1、以什么样的方式打开新页面 2、多少毫秒打开? //我们以zoom-fade-out 的形式打开 350毫秒 });
1、关闭加载框
2、打开新页面
底部导航
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> </head> <body> <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> <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> <script type="text/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'); } }); </script> </body> </html>
页面预加载
http://dev.dcloud.net.cn/mui/util/
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//预加载窗口数量限制(一旦超出,先进先出)默认不限制 })
预加载有两种方式
1.写在 mui.init();
mui.init({ preloadPages:[ //加载一个界面 { url:'a.html', id:'a', styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 }, { // 可加载另外一个界面,不需要可直接删除 url:'b.html', id:'b', styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ] });
2、写在plusReady()
mui.plusReady(function(){ mui.preload({ url:'newpage.html', //需要打开页面的url地址 id:'newpage', //需要打开页面的url页面id styles:{ top:'0px',//新页面顶部位置 bottom:'0px',//新页面底部位置 // width:newpage-width,//新页面宽度,默认为100% // height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ name:'aries', age:'18', // .....//自定义扩展参数,可以用来处理页面间传值 } }); });
ajax get 请求
//1 地址 2 参数 3回调函数 mui.get("dizhi",{item:1,item:2},function(data){ for(var a in data){ console.log(data[a].name); } },'json');
蜂鸣
mui.beep();
震动
mui.vibrate();
原生actionsheet
<button id="bsheet">原生的actionsheet</button>
mui(".mui-content").on("click","#bsheet",function(){ 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: //写自己的逻辑 alert("微信"); break; case 2: //写自己的逻辑 alert("新浪"); break; case 3: alert("搜狐"); break; } }); });
当点击取消时候,返回 index 是0
点击微信就是1 依次类推
手势事件
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()即可,如下:
elem.addEventListener("swipeleft",function(){
console.log("你正在向左滑动");
});
若多个元素执行相同逻辑,则建议使用事件绑定(on())。
扩展阅读
代码块激活字符: minitgesture
页面消息框
<button id="bconfirm">confirm</button>
<button id="bprompt">prompt</button>
<button id="btoast">toast</button>
<button id="bdate">日期</button>
<button id="btime">时间</button>
mui(".mui-content").on("click","#balert",function(){ mui.alert("恭喜您点击了按钮",function(){ alert("点击完毕"); }); }); mui(".mui-content").on("click","#bconfirm",function(){ var btnArray = ['是','否']; mui.confirm('你是否在学习,赞?','我是标题',btnArray,function(e){ if(e.index==0){ alert('点击了- 是'); //自己的逻辑 }else{ alert('点击了- 否'); } }); }); mui(".mui-content").on("click","#bprompt",function(){ mui.prompt("请输入名字","张三","社会调查",['确定','取消'],function(e){ console.log(e); }) }); mui(".mui-content").on("click","#btoast",function(){ mui.toast("<span class='mui-icon mui-icon-person'></span><br>操作成功"); }); mui(".mui-content").on("click","#bdate",function(){ //js里的月份 是从0月开始的,也就是说,js中的0月是我们1月 var dDate=new Date(); //默认显示的时间 dDate.setFullYear(dDate.getFullYear(),dDate.getMonth(),dDate.getDay()); var minDate=new Date(); //可选择的最小时间 minDate.setFullYear(2010,0,1); var maxDate=new Date(); //课选择的最大的时间 maxDate.setFullYear(2020,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}); }); mui(".mui-content").on("click","#btime",function(){ var dTime=new Date(); dTime.setHours(dTime.getHours(),dTime.getMinutes()); //设置默认时间 设置的当前时间 //当然您也可以设置成 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}); });
自定义事件
遮罩
//创建一个遮罩
var z= mui.createMask();
z.show();
z.close();
手势
在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,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("你正在向左滑动");
});
上拉加载下拉刷新
refersh.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <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> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <script type="text/javascript"> mui.init({ subpages:[{ url:"refersh_content.html",//子页面HTML地址,支持本地地址和网络地址 id:"refersh_content",//子页面标志 styles:{ top:"44px",//子页面顶部位置 高度和宽度是带有px的,否则不生效 bottom:"50px",//子页面底部位置 //width:subpage-width,//子页面宽度,默认为100% //height:subpage-height,//子页面高度,默认为100% //...... }, extras:{ name:"我的第一个子页面" }//额外扩展参数 }] }); </script> </body> </html>
refersh_content.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <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">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> <li class="mui-table-view-cell">我是一二三</li> </ul> </div> </div> <script type="text/javascript"> /* 下拉 mui.init({ pullRefresh : { container:"#pullrefresh",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等 down : { contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 callback : downfn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据; } } }); function downfn(){ //业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //这行代码会隐藏掉 正在加载... 容器 alert("下拉"); }*/ mui.init({ pullRefresh: { container: '#pullrefresh', down: { contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 callback: downFn // 下拉执行函数 }, up: { contentrefresh: '正在加载...', contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 callback: upFn // 上拉执行函数 } } }); //刷新 function downFn(){ mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //这行代码会隐藏掉 正在加载... 容器 } //加载更多的信息 function upFn(){ //这里需要和返回true 或false /*如果返回false 证明有数据 返回 true 没有数据了 */ var _this = this; //这里根据业务进行判断是有没有更多的数据 //_this.endPullupToRefresh(true); _this.endPullupToRefresh(false); } </script> </body> </html>
只有上拉刷新下拉加载的时候 ,需要创建子页面,其他时间不需要
refersh.html 这个是主页面
refersh_content.html 这个是内容页面
这两个页面把整个案例描述的很详细了。
plus.webview.create("要打开的页面","分配一个ID",打开分配的样式); //创建子页面
plus.webview.currentWebview(); //获取当前页面
plus.getWebviewById("分配一个ID"); //获取一个打开的子页面
常见类名
.mui-table-view
.mui-table-view-cell
mui获取dom对象
mui.id("#user");
mui.tagName()
mui("#user")
mui.back(); 返回上一层页面
创建文档快捷键
mhead 回车自动创建一个头部
mbody 回车自动出现body体
mtab 回车创建底部导航栏
说明:
头部导航 默认高度 44px
底部导航 默认高度 50px