mui页面标签页从后台取数据嵌入app，混合式开发

最新推荐文章于 2021-06-03 08:13:23 发布

置顶恋念思尔悄悄然

最新推荐文章于 2021-06-03 08:13:23 发布

阅读量2.6k

点赞数

分类专栏：我的前端啦

本文链接：https://blog.csdn.net/sdiudui/article/details/80539084

版权

我的前端啦专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近公司做项目，要求写一个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>