工欲其事必先利其器
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