最近公司做项目，要求写一个h5页面，嵌入到app中，想了想干脆直接用mui吧
直接上代码了
<!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/jquery.min.js"></script>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div id="slider" class="mui-slider">
<div class="mui-slider mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#hardware">
HARDWARE
</a>
<a class="mui-control-item" href="#platform">
PLATFORM
</a>
<a class="mui-control-item" href="#ar">
AR
</a>
</div>
<div class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="hardware" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view" id="dataul1">
</ul>
</div>
<div id="platform" class="mui-slider-item mui-control-content">
<ul class="mui-table-view" id="dataul2">
</ul>
</div>
<div id="ar" class="mui-slider-item mui-control-content">
<ul class="mui-table-view" id="dataul3">
</ul>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//获取 url 后的参数值
function getUrl(para){
var paraArr = window.location.search.substring(1).split('&');
for(var i = 0;i < paraArr.length;i++){
if(para == paraArr[i].split('=')[0]){
return paraArr[i].split('=')[1];
}
}
return '';
}
var deviceType = getUrl('deviceType');
if(deviceType == ""){
deviceType = "android";
}
//判断questionType
mui(".mui-segmented-control").on("tap","a",function(){
var targetTab = this.getAttribute('href');
var questionType = "";
if(targetTab == "#hardware"){
questionType = 1;
}
if(targetTab == "#platform"){
questionType = 2;
}
if(targetTab == "#ar"){
questionType = 3;
}
load(questionType);
});
function load(questionType){
//获取列表信息
mui.ajax("http://test.naochuanyue.com:8081/Mirage//user/getFqaHelpList",{
data:{
deviceType:deviceType,
questionType:questionType
},
dataType:'jsonp',//服务器返回json格式数据
type:'post',//HTTP请求类型
async:true,
//timeout:10000,//超时时间设置为10秒；
//headers:{'Content-Type':'application/jsonp'},
success:function(data){
$("#dataul"+questionType).html(" ");
var datajson = JSON.parse(data);
if(datajson.errcode == 0){
if(datajson.body == undefined || datajson.body.length < 0){
return false;
}
if(datajson.body.length > 0){
var datajsonList = datajson.body;
var datajsonListboject = JSON.parse(datajsonList);
var str = "";
for(var i=0;i<datajsonListboject.length;i++){
$("#dataul"+questionType).append('<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="javascript:void(0)"><span class="mui-icon mui-icon-help"></span> '+datajsonListboject[i].question+'</a><div class="mui-collapse-content"><p style="text-align: justify;">'+datajsonListboject[i].answer+'</p></div></li>');
}
}
}
if(datajson.errcode != 0){
alert(datajson.errmsg);
}
},
error:function(xhr,type,errorThrown){
//异常处理；
alert("系统繁忙，请联系管理员");
}
});
}
</script>
<script type="text/javascript" charset="utf-8">
mui.init();
load(1);
</script>