mui框架手机报考驾校预约
mui框架汽车美容维修4S店
有赞微信端登录注册手机wap模板
养老惠手机wap商城模板
mui手机注册app模板
利民手机wap商城
mui金融行业app模板
mui酒店预订app模板
MUI精美简洁后台管理系统
mui实例教程demo

HBulider支持es6，只需在项目目录上点右键，选择引入语法框架，选择es6。
自带的浏览器不支持es6。
在手机上运行，需要安卓版本6.0以上才支持es6。

1、移除addEventListenner，名字太长,主要是没用，完全可以用on替代。
2、on(event,selector,handler)为批量选择元素,而on(event,handler)则为addEventListenner的替代方法，内部只需稍微做下判断第二个参数是否为一个函数做处理即可,既简单又不冗余。

求助一个技术牛人外包，有偿解决支付问题
主要是解决支付宝问题还有第三方支付集成，现在自己调试报al138173，我的qq329523326

IOS是6，安卓是华为。安卓手机在线和后台能接受到推送信息，退出的话接受不到，苹果手机的APP在不在线都可以接受到推送。
后台代码没有弄，是通过个推上的透传消息进行的推送。客户端代码如下：

//消息推送  
mui.plusReady(function() {  

    // 监听点击消息事件  
    plus.push.addEventListener( "click", function( msg ) {  
        var payload=(plus.os.name=='iOS')?msg.payload:JSON.parse(msg.payload);  
    }, false );  

    // 监听在线消息事件  
    plus.push.addEventListener( "receive", function( msg ) {  
        logoutPushMsg( msg );  
    }, false );  

});  

//获取穿透参数  
function logoutPushMsg( msg ) {  
    if ( msg.payload ) {  
        if ( typeof(msg.payload)=="string" ) {  
            createLocalPushMsg(msg.content);  
        } else {  
            var data = JSON.parse(msg.payload);  
            createLocalPushMsg(data.content);  
        }  
    } else {  
        console.log( "payload: undefined" );  
    }  
}  

//创建本地推送  
function createLocalPushMsg(content){  

    var options = {cover:false,};  
    plus.push.createMessage(content, "LocalMSG", options );  
    if(plus.os.name=="iOS"){  
        alert('*如果无法创建消息，请到"设置"->"通知"中配置应用在通知中心显示!');  
    }  

}

PS：IOS的话证书有两份，一份是上传到个推的，一份是打包用的。可以参考网站：http://docs.getui.com/mobile/ios/apns/

HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js mui-UI实战 mui，h5+ APP开发实战功能 app开发{仿支付宝，仿微信，仿e袋洗，仿驾考宝典，仿微店，仿教室帮，仿饿了么，仿糗事百科，仿猫眼电影，仿天猫，仿今日头条，东翌同城约，东翌课堂，内涵段子，全套实战开发，让大家快速学习APP开发全体课程只需要499啦 想学习的点击链接咨询课程499全套课程

这部分直接上代码，都是自己一行一行码出来的，每个方法都非常有用：

• msg: function(msg, icon, timer) 弹出层
• alert: function(msg, icon, callback) 弹出框，带确认按钮，可事件回调
• confrim: function(msg, callback) 确认框，带事件回调
• open: function(url, params, aniShow) 打开新页面，or 页面跳转
• close: function() 关闭当前页面
• exit: function() Android下直接退出，ios不支持
• backExit: function() 点击2次返回退出app
• currPageId: function(callback) 获取当前窗体的ID
• getParam: function(key, callback) 获取上个页面船体过来的参数
• GetUrlParms: function() 获取get url地址里的所有参数，返回数组
• isBrowser：这是个属性，用来判定是否是在浏览器中打开，如果一套代码想兼容app和微信，这个很有用
• loading: function() 自定义的弹出loading，加载数据前显示
• loadingClose: function(timer) 关闭loading
• ajax: function(type, url, params, callback, callbackErr, el) 异步请求数据，支持post、get、put、delete等。
• update: function() 系统自动升级
• updateCheck: function() 自动升级的具体实现
• validaCom：验证规则封装
• jsonCom：操作JSON封装
• dataCom 数据存储封装
• netCom：网络监测封装

• account：当前登录用户信息封装

  define(['_', 'layer', 'config', 'common'], function(_, layer, config) {  
  return {  
      //系统提醒  
      msg: function(msg, icon, timer) {  
          timer = (timer == undefined ? 1500 : timer*1000);  
          layer.msg(msg, {  
              icon: icon,  
              anim: 0,  
              time: timer  
          });  
      },  
      //系统弹出提醒  
      alert: function(msg, icon, callback) {  
          layer.msg(msg, {  
              title: '',  
              icon: icon,  
              shade: 0.3,  
              shadeClose: false,  
              btnAlign: 'c',  
              btn: ['我知道了'],  
              time: 9999999,  
              yes: function(idx) {  
                  if(callback)  
                      callback();  
                  layer.close(idx);  
              }  
          });  
      },  
      confrim: function(msg, callback) {  
          var my = this;  
          layer.msg(msg, {  
              time: 9999999,  
              icon: 3,  
              shade: 0.3,  
              shadeClose: false,  
              btn: ['确 定', '取 消'],  
              yes: function(index) {  
                  if(callback)  
                      callback();  
                  layer.close(index);  
              }  
  
          });  
      },  
      //打开新窗体  
      open: function(url, params, aniShow) {  
          var my = this;  
          if(!my.isBrowser) { //app跳转  
              if(!aniShow) {  
                  var anType = ['slide-in-right', 'slide-in-left', 'slide-in-top', 'slide-in-bottom', 'fade-in', 'zoom-out', 'zoom-fade-out', 'pop-in'];  
                  var anIdx = Math.floor((Math.random() * anType.length));  
                  if(mui.os.ios)  
                      aniShow = anType[anType.length - 1];  
                  else  
                      aniShow = anType[0];  
  
              }  
              mui.openWindow({  
                  id: url,  
                  url: url,  
                  extras: params,  
                  createNew: false,  
                  show: {  
                      autoShow: true, //页面loaded事件发生后自动显示，默认为true  
                      aniShow: aniShow, //anType[anIdx], //页面显示动画，默认为”slide-in-right“；  
                      duration: 200 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；  
                  },  
                  waiting: {  
                      autoShow: false, //自动显示等待框，默认为true  
                      title: config.dictionary.strings.LOADING, //等待对话框上显示的提示内容  
                      options: {  
                          //back:'none',  
                          background: 'rgba(0,0,0,0.75)',  
                          round: 5,  
                          loading: {  
                              //icon: '/img/loading-png.png',  
                              height: '50px',  
                              display: 'inline'  
                          }  
                      }  
                  },  
              })  
          } else { //浏览器跳转  
              var newUrl = url;  
              var newParams;  
              if(params != null) {  
                  newParams = my.jsonCom.jsonToUrlParam(params);  
                  url += "?" + newParams;  
              }  
              //加随机参数清缓存  
              if(url.indexOf('?') == -1)  
                  url += '?_=' + (new Date().getTime());  
              else  
                  url += '&_=' + (new Date().getTime());  
              top.location.href = url;  
          }  
      },  
      //关闭窗体  
      close: function() {  
          if(!this.isBrowser) {  
              var ws = plus.webview.currentWebview();  
              plus.webview.close(ws);  
          } else  
              history.back();  
      },  
      exit: function() {  
          plus.runtime.quit();  
      },  
      //双击返回退出APP  
      backExit: function() {  
          var my = this;  
          if(!my.isBrowser) {  
              var _clickNum = 0;  
              mui.init({  
                  beforeback: function() {  
                      _clickNum++;  
                      if(_clickNum > 1) {  
                          plus.runtime.quit();  
                      } else {  
                          my.msg("再按一次退出应用");  
                      }  
                      setTimeout(function() {  
                          _clickNum = 0;  
                      }, 1000);  
                      return false;  
                  }  
              });  
          }  
      },  
      //获取当前页面ID  
      currPageId: function(callback) {  
          if(sysCom.isBrowser)  
              callback(location.href);  
          else {  
              mui.plusReady(function() {  
                  callback(plus.webview.getLaunchWebview().getURL());  
              });  
          }  
      },  
      //获取页面参数  
      getParam: function(key, callback) {  
          if(!sysCom.isBrowser) {  
              mui.plusReady(function() {  
                  var wv = plus.webview.currentWebview();  
                  var value = wv[key];  
                  callback(value);  
              });  
          } else {  
              var value = urlCom.getParam(key);  
              callback(value);  
          }  
      },  
      //获取URL所有参数  
      GetUrlParms: function() {  
          var args = new Object();  
          var query = location.search.substring(1); //获取查询串  
          var pairs = query.split("&"); //在逗号处断开  
          for(var i = 0; i < pairs.length; i++) {  
              var pos = pairs[i].indexOf('='); //查找name=value  
              if(pos == -1) continue; //如果没有找到就跳过  
              var argname = pairs[i].substring(0, pos); //提取name  
              var value = pairs[i].substring(pos + 1); //提取value  
              args[argname] = decodeURIComponent(value); //存为属性  
          }  
          return args;  
      },  
      //是否是普通浏览器打开  
      isBrowser: !mui.os.plus,  
      //loading弹出层  
      loading: function() {  
          var box = $('#loading-layout');  
          if(box.length == 0) {  
              $('body').append('<div id="loading-layout"><div class="loading"></div></div>');  
              box = $('#loading-layout');  
          }  
          var box_loading = $('#loading-layout .loading');  
          var width = box.width();  
          var height = box.height();  
          var width_loading = box_loading.width();  
          var height_loading = box_loading.height();  
          $('#loading-layout .loading').css('top', (height - height_loading) / 2 + 'px')  
          $('#loading-layout .loading').css('left', (width - width_loading) / 2 + 'px')  
          box.show();  
      },  
      //关闭弹出层  
      loadingClose: function(timer) {  
          setTimeout(function() {  
              $('#loading-layout').remove();  
          }, (timer ? timer : 0))  
      },  
      /******* http 请求 *******/  
      //请求 get  
      ajax: function(type, url, params, callback, callbackErr, el) {  
          var my = this;  
          if(!config.appCONFIG.netStatus) {  
              my.msg(config.dictionary.strings.NO_NET_POST)  
              if(callbackErr)  
                  callbackErr(config.dictionary.strings.NO_NET_POST);  
              return false;  
          }  
          var el_txt = '';  
          var timer;  
          var timer_sec = 0;  
          if(el) {  
              el_txt = $(el).text();  
              $(el).attr('disabled', true).text('正在提交');  
              timer = setInterval(function() {  
                  if(timer_sec < 3) {  
                      $(el).text($(el).text() + '.');  
                      timer_sec++;  
                  } else {  
                      $(el).text('正在提交');  
                      timer_sec = 0;  
                  }  
              }, 500);  
          }  
          //my.loading();  
          $.ajax({  
              url: url,  
              type: type, //GET  
              async: true, //或false,是否异步  
              data: params,  
              timeout: 15000, //超时时间  
              dataType: 'jsonp',  
              jsonp: "theFunction",  
              success: function(data, textStatus, jqXHR) {  
                  callback(data);  
              },  
              error: function(xhr, textStatus) {  
                  if(textStatus == "error")  
                      my.msg(config.dictionary.strings.SERVER_ERROR);  
                  else if(textStatus == "timeout")  
                      my.msg(config.dictionary.strings.TIMEOUT);  
                  else {  
                      //console.log(xhr.responseText)  
                      var jsonXhr = JSON.parse(xhr.responseText);  
                      //令牌错误重新登陆  
                      if(jsonXhr.ExceptionMessage == config.dictionary.strings.INVALID_TOKEN) {  
                          my.msg(config.dictionary.strings.INVALID_TOKEN_ERR);  
                      } else {  
                          my.msg("error：" + jsonXhr.ExceptionMessage);  
                      }  
                  }  
                  if(callbackErr)  
                      callbackErr(xhr, textStatus);  
              },  
              complete: function() {  
                  //my.loadingClose();  
                  if(el) {  
                      $(el).text(el_txt)  
                      $(el).removeAttr('disabled');  
                      clearInterval(timer);  
                  }  
              }  
          })  
      },  
      //系统自动更新  
      update: function() {  
          if(window.plus) {  
              this.updateCheck();  
          } else {  
              document.addEventListener('plusready', this.updateCheck, false);  
          }  
      },  
      //系统升级检测  
      updateCheck: function() {  
          var appVer = ''; //app版本  
          var newVer = ''; //最新版本  
          //获得当前版本  
          plus.runtime.getProperty(plus.runtime.appid, function(inf) {  
              appVer = inf.version;  
              $('.copyright').html('陕西中电新盛物流有限公司v' + appVer);  
              //console.log(1)  
              //发起新版本请求检测  
              var update_url = config.urlCONFIG.get_appupdate + "/version.txt?bust=" + (new Date().getTime());  
              //console.log(update_url)  
              $.get(update_url, {}, function(res) {  
                  var data = JSON.parse(res);  
                  newVer = data.version;  
                  fileType = 'wgt';  
                  if(appVer != newVer && parseInt(appVer.replaceAll('\\.', '')) < parseInt(newVer.replaceAll('\\.', ''))) {  
                      var waiting = plus.nativeUI.showWaiting("有新版本啦，正在下载更新 0%...", {  
                          width: '100%',  
                          height: '100%',  
                          //back: 'none',  
                          round: 1,  
                      });  
  
                      //下载更新包                   
                      var file_downing = plus.downloader.createDownload(config.urlCONFIG.get_appupdate + "/wgt/" + newVer + "." + fileType + "?_=" + (new Date().getTime()), {  
                          filename: "_doc/update/"  
                      }, function(d, status) {  
                          if(status == 200) {  
                              var _filename = d.filename;  
                              // 安装更新包  
                              plus.runtime.install(_filename, {}, function() {  
                                  //更新完毕删除更新包  
                                  plus.io.resolveLocalFileSystemURL(_filename, function(entity) {  
                                      entity.remove();  
                                  }, function(error) {  
                                      debugCom.log(error.message);  
                                  });  
                                  //如果是安卓自动重启应用，ios需要手动重启应用  
                                  if(mui.os.android) {  
                                      waiting.setTitle('更新完成，正在重新打开应用...');  
                                      setTimeout(function() {  
                                          plus.nativeUI.closeWaiting();  
                                          plus.runtime.restart();  
                                      }, 1000)  
                                  } else {  
                                      plus.nativeUI.closeWaiting();  
                                      mui.alert('更新完成，请彻底结束应用并重新打开！', '', function() {  
                                          //plus.runtime.restart();  
                                      })  
                                  }  
  
                              }, function(e) {  
                                  waiting.setTitle('更新失败:' + e.message);  
                                  setTimeout(function() {  
                                      plus.nativeUI.closeWaiting();  
                                  }, 2000);  
                              });  
                          } else {  
                              mui.toast('下载更新包出现问题:' + status)  
                          }  
                      });  
                      //下载百分比  
                      file_downing.addEventListener("statechanged", function() {  
                          var per = parseInt(file_downing.downloadedSize / file_downing.totalSize * 100);  
                          per = (per == NaN ? 0 : per);  
                          waiting.setTitle("有新版本啦，正在下载更新 " + per + "%");  
                      }, false);  
                      //开始下载  
                      file_downing.start();  
                  }  
  
              });  
          })  
      },  
      /********验证********/  
      validaCom: {  
          //验证正则  
          _regex: {  
              mobile: /^1+\d{10}$/,  
              isIDCard: /^\d{17}[\d|X|x]$|^\d{15}$/,  
              email: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,  
          },  
          //验证手机  
          isMobile: function(txt) {  
              return this._regex.mobile.test(txt);  
          },  
          //验证邮箱  
          isEmail: function(txt) {  
              return this._regex.email.test(txt);  
          },  
          //身份证验证  
          isIDCard: function(txt) {  
              return this._regex.isIDCard.test(txt);  
          },  
      },  
      /********json操作********/  
      jsonCom: {  
          //将json转成url参数  
          jsonToUrlParam: function(param, key) {  
              var my = this;  
              var paramStr = "";  
              if(param instanceof String || param instanceof Number || param instanceof Boolean) {  
                  paramStr += "&" + key + "=" + encodeURIComponent(param);  
              } else {  
                  $.each(param, function(i) {  
                      var k = key == null ? i : key + (param instanceof Array ? "[" + i + "]" : "." + i);  
                      paramStr += '&' + my.jsonToUrlParam(this, k);  
                  });  
              }  
              return paramStr.substr(1);  
          },  
          //将url参数转成json  
          urlParamToJson: function(url) {  
              if(url.indexOf("?") > -1) {  
                  var string_a = url.split('?')[1];  
                  if(string_a.length > 0) {  
                      var string = string_a.split('&');  
                      var res = {};  
                      for(var i = 0; i < string.length; i++) {  
                          var str = string[i].split('=');  
                          res[str[0]] = str[1];  
                      }  
                      return res;  
                  } else  
                      return null;  
              } else  
                  return null;  
  
          }  
      },  
      /********数据存储********/  
      dataCom: {  
          set: function(key, data) {  
              localStorage.setItem(key, data);  
          },  
          get: function(key) {  
              return localStorage.getItem(key);  
          },  
          remove: function(key) {  
              localStorage.removeItem(key)  
          },  
          clear: function() {  
              localStorage.clear();  
          }  
      },  
      /*********** 网络监测 *************/  
      netCom: {  
          init: function() {  
              var my = this;  
              //网络检测  
              mui.plusReady(function() {  
                  if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {  
                      config.netStatus = false;  
                      layer.msg(config.dictionary.strings.NO_NET);  
                  }  
                  document.addEventListener("netchange", my.change, false);  
              });  
          },  
          change: function() {  
              var my = this;  
              mui.plusReady(function() {  
                  //获取当前网络类型  
                  var nt = plus.networkinfo.getCurrentType();  
                  switch(nt) {  
                      case plus.networkinfo.CONNECTION_ETHERNET:  
  
                      case plus.networkinfo.CONNECTION_WIFI:  
  
                      case plus.networkinfo.CONNECTION_CELL2G:  
  
                      case plus.networkinfo.CONNECTION_CELL3G:  
  
                      case plus.networkinfo.CONNECTION_CELL4G:  
                          if(!config.netStatus) {  
                              layer.msg(config.dictionary.strings.YES_NET);  
                          }  
                          config.netStatus = true;  
                          break;  
                      default:  
                          if(config.netStatus) {  
                              layer.msg(config.dictionary.strings.NO_NET);  
                          }  
                          config.netStatus = false;  
                          break;  
                  }  
              });  
          }  
      },  
      /*********** 用户信息 *************/  
      account: {  
          getUser: function() {  
              var datauser = localStorage.getItem('datauser');  
              if(datauser) {  
                  return JSON.parse(datauser);  
              } else {  
                  return null;  
              }  
          }  
      }  
  }  
  });

如上是界面，UI自己弄去，

【HTML结构代码】-login.html

当我们点击登录的时候需要验证，要实现以下效果：

这个弹层使用的是layer插件，下面我们来上JS代码：

<script src="js/libs/require.js?v=1.0"></script>  
        <script src="js/require-config-index.js?v=1.0"></script>  
        <script src="js/app.js?v=1.0"></script>  
        <script>  
            requirejs(['common', 'config'], function(com, con) {  
                //检测升级  
                com.update();  

                //如果已经登陆，则直接进入首页  
                var user = com.account.getUser();  
                if(user)  
                {  
                    $('#carCode').val(user.vehCode);  
                    $('#mobile').val(user.driverMobile);  
                }  
                //双击退出  
                com.backExit();  

                $('button[type="submit"]').click(function() {  
                    var carCode = $('#carCode').val();  
                    var mobile = $('#mobile').val();  
                    var password = $('#password').val();  
                    if(carCode == "") {  
                        com.msg('请输入车牌号')  
                        return false;  
                    }  
                    if(mobile == "") {  
                        com.msg('请输入手机号')  
                        return false;  
                    }  
                    if(password == "") {  
                        com.msg('请输入密码')  
                        return false;  
                    }  
                    com.ajax('get', con.urlCONFIG.get_login, {  
                        'carCode': carCode,  
                        'mobile': mobile,  
                        'password': password  
                    }, function(jsonStr) {  
                        if(jsonStr) {  
                            com.dataCom.set('datauser',JSON.stringify(jsonStr));  
                            com.dataCom.set('datalogin','1');  
                            com.open('index.html');  
                        } else {  
                            com.msg('登录信息错误', 0);  
                        }  
                    }, null, this);  

                    return false;  
                })  
            });  
        </script>

细心的群众可能发现，为何没有对mui.js引用，是的，为了代码更加简洁，编码更加方便，本人将jquery和mui都压缩到了requirejs里。因为requirejs引用js都是异步的，很多童鞋在比如在使用$的时候，jquery还没加载进来，就报错了，所以本人这么做有2个好处：1，减少了文件请求数；2，全局注册了$和mui。

JS中我们多次看到com和con，com和con就是本人封装好的common.js和config.js。
common.js：主要是公共函数封装，比如系统升级，弹层，数据的存取，字符、数据处理等。
config.js：主要是封装一些静态变量。

这一节就讲到这，下节我们会详细讲解封装的关键js：common和config还有app.js，这3个脚本基本在任何APP里都可以共用，使我们开发的关键。

废话不多说，故事不多讲，直接上干货。
本人之前已经有3个DCloud开发APP的经验了，这次刚好有一个小的项目需要快速开发，所以边开发边写了这个教程供大家做开发参考。
本次我们还是按照Dcloud的套路来，但是我们需要用到requireJS来模块化封装下，这样模块化的好处后续我们可以体验到。
基本上使用到的JS会有：mui+Jquery+requireJS+layer+underscore

• requirejs用来模块化封装
• layer用来做弹窗
• underscore用来处理数据

最终目录结构如下：

系统运行起来后的界面：

下一章，我们开始编写代码，初步完成我们这个系统。

hCoder资源平台，有很多关于H5+和mui的视频资源，还有个类似mui的前端框架hui.

资源平台链接地址：http://www.hcoder.net/course

这个是入口,首页分header(分类,可滑动),footer,内容部分通过子页面加载

<html lang="en">  

    <head>  
        <meta charset="UTF-8" />  
        <title>Document</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link rel="stylesheet" type="text/css" href="css/mui.css" />  
    </head>  

    <body>  
        <header>  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="abc" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <div class="mui-scroll" id="splitH">  
                        <a class="mui-control-item mui-active" data-index="0">  
                            头条  
                        </a>  
                        <a class="mui-control-item" data-index="1">  
                            娱乐  
                        </a>  
                        <a class="mui-control-item" data-index="2">  
                            体育  
                        </a>  
                        <a class="mui-control-item" data-index="3">  
                            财经  
                        </a>  
                        <a class="mui-control-item" data-index="4">  
                            科技  
                        </a>  
                        <a class="mui-control-item" data-index="5">  
                            军事  
                        </a>  
                        <a class="mui-control-item" data-index="6">  
                            NBA  
                        </a>  
                        <a class="mui-control-item" data-index="7">  
                            国际足球  
                        </a>  
                        <a class="mui-control-item" data-index="8">  
                            中国篮球  
                        </a>  
                    </div>  
                </div>  
            </div>  
        </header>  
        <div class="mui-content" style="padding-bottom:50px;padding-top:50px;">  

        </div>  
        <footer>  
            <nav class="mui-bar mui-bar-tab">  
                <a href="main.html" index=0 class="mui-tab-item mui-active" data-index="0">  
                    <span class="mui-icon mui-icon-home"></span>  
                    <span class="mui-tab-label">首页</span>  
                </a>  
                <a href="m.html" index=1 class="mui-tab-item" data-index="1">  
                    <span class="mui-icon mui-icon mui-icon-bars"></span>  
                    <span class="mui-tab-label">新闻</span>  
                </a>  
                <a class="mui-tab-item" data-index="2">  
                    <span class="mui-icon mui-icon mui-icon-videocam"></span>  
                    <span class="mui-tab-label">视频</span>  
                </a>  
                <a href="login.html" class="mui-tab-item" data-index="3">  
                    <span class="mui-icon mui-icon mui-icon-contact"></span>  
                    <span class="mui-tab-label">我</span>  
                </a>  
            </nav>  
        </footer>  

        <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>  
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>  
        <script src="js/d1.js" type="text/javascript" charset="utf-8"></script>  
    </body>  

</html>  

d1.js

mui.init({//初始化加载列表页,d2.html  
    subpages: [main.h.page('d2', {  
        top: '44px',  
        bottom: '50px'  
    })]  
});  
mui.plusReady(function() {  
indexPage.init();  

});  
var indexPage = {  
    tabIndex:0,  
    init:function(){  
        var self = this;  
        mui("#splitH").on('tap', 'a', function() {//header分类点击事件  
            var index = this.getAttribute("data-index");  
            if(index==self.tabIndex) return;//重复点击,跳过  
            self.tabIndex = index;  
            var embed = plus.webview.getWebviewById('d2');  
            embed.evalJS("parentParams("+index+");");//调用子页面方法,加载相应列表  
        });       
    },  
    go:function(i){//子类左滑/右滑改变分类的颜色  
        mui('#abc').scroll().scrollTo(-50*i,0,100);//100毫秒滚动  
        mui('#splitH a')[this.tabIndex].classList.remove('mui-active');  
        mui('#splitH a')[i].classList.add('mui-active');  
        this.tabIndex = i;  
    }  
};  

d2.html

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="css/mui.css">  
        <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  

            .mui-pull-top-tips {  
                z-index: 999999;  
                position: absolute;  
                top: -20px;  
                left: 50%;  
                margin-left: -25px;  
                width: 40px;  
                height: 40px;  
                border-radius: 100%;  
            }  

            .mui-pull-top-wrapper {  
                width: 42px;  
                height: 42px;  
                display: block;  
                text-align: center;  
                background-color: #efeff4;  
                border: 1px solid #ddd;  
                border-radius: 25px;  
                background-clip: padding-box;  
                box-shadow: 0 4px 10px #bbb;  
                overflow: hidden;  
            }  

            .mui-pull-top-tips.mui-transitioning {  
                -webkit-transition-duration: 200ms;  
                transition-duration: 200ms;  
            }  

            .mui-pull-top-tips .mui-pull-loading {  
                margin: 0;  
            }  

            .mui-pull-top-wrapper .mui-icon,  
            .mui-pull-top-wrapper .mui-spinner {  
                margin-top: 7px;  
            }  

            .mui-pull-bottom-tips {  
                text-align: center;  
                background-color: #efeff4;  
                font-size: 15px;  
                line-height: 40px;  
                color: #777;  
            }  

            .mui-pull-top-canvas {  
                overflow: hidden;  
                background-color: #fafafa;  
                border-radius: 40px;  
                box-shadow: 0 4px 10px #bbb;  
                width: 40px;  
                height: 40px;  
                margin: 0 auto;  
            }  

            .mui-pull-top-canvas canvas {  
                width: 40px;  
            }  

            .ud,  
            .ud p {  
                padding: 5px;  
                color: #000;  
            }  

            .ud a {  
                width: 33.3333%;  
                float: left;  
            }  

            .ud img {  
                width: 100%;  
            }  

            #uda {  
                margin: 0;  
            }  

            #pp div {  
                border: 0;  
            }  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  
            <div id="scroll1" class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  

                    </ul>  
                </div>  
            </div>  
        </div>  
    </body>  
    <script src="js/mui.js"></script>  
    <script src="js/mui.pullToRefresh.js"></script>  
    <script src="js/mui.pullToRefresh.material.js"></script>  
    <script>  
        mui.init();  
        mui.plusReady(function() {  
            detail.init();  
        });  
        var detail = {  
            tabIndex: 0,  
            count: 3,  
            pullObj: '',  
            mainPage: '',  
            titleName: ['头条', '娱乐', '体育', '财经', '科技', '军事', 'NBA', '国际足球','中国篮球'],  
            init: function() {  
                this.mainPage = plus.webview.getLaunchWebview();  
                this.setScroll();  
                this.pullDown();  
                this.initGallery();  
            },  
            setTabIndex: function(index) {  
                this.tabIndex = index;  
            },  
            setScroll: function() {  
                var self = this;  
                mui('.mui-scroll-wrapper').scroll({  
                    bounce: false,  
                    indicators: false, //是否显示滚动条  
                    deceleration: 0.003 //滚动效果越大越灵敏  
                });  
                //循环初始化所有下拉刷新，上拉加载。  
                self.pullObj = mui('.mui-scroll').pullToRefresh({  
                    down: {  
                        callback: function() {  
                            var _self = this;  
                            setTimeout(function() {  
                                var ul = _self.element.querySelector('.mui-table-view');  
                                ul.innerHTML = "";  
                                ul.appendChild(self.getData());  
                                //ul.removeChild(ul.firstChild).insertBefore(self.getData(), ul.firstChild);  
                                _self.endPullDownToRefresh();  
                            }, 1000);  
                        }  
                    },  
                    up: {  
                        callback: function() {  
                            var _self = this;  
                            setTimeout(function() {  
                                var ul = _self.element.querySelector('.mui-table-view');  
                                ul.appendChild(self.getData());  
                                _self.endPullUpToRefresh();  
                            }, 1000);  
                        }  
                    }  
                });  
            },  
            pullDown: function() {  
                this.pullObj.pullDownLoading();  
            },  
            getData: function() {//获取数据  
                console.log('开始加载...');  
                var fragment = document.createDocumentFragment();  
                var li;  
                for(var i = 0; i < this.count; i++) {  
                    li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = this.titleName[this.tabIndex] + '选项卡子项';  
                    fragment.appendChild(li);  
                }  
                return fragment;  

            }  

        };  
        document.addEventListener("swipeleft", function() {  
            if(detail.tabIndex == detail.titleName.length - 1) return;  
            detail.tabIndex += 1;  
            detail.pullDown();  
            detail.mainPage.evalJS("indexPage.go(" + detail.tabIndex + ");");  
            console.log("你向左滑动了");  
        });  
        document.addEventListener("swiperight", function() {  
            if(detail.tabIndex == 0) return;  
            detail.tabIndex += -1;  
            detail.pullDown();  
            detail.mainPage.evalJS("indexPage.go(" + detail.tabIndex + ");");  
            console.log("你向右滑动了");  
        });  

        function parentParams(i) {//供父类调用  
            detail.setTabIndex(i);  
            detail.pullDown();  
        }  

    </script>  

</html>  

哪里有不足的地方希望大家指出

添加。
<script src="html5plus://ready"></script>