遨翔在知識的海洋裡----(apicloud之下拉重新整理元件)

遨翔在知識的海洋裡發表於2018-04-11
APICloud元件
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>文件</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
	<style>
		.empty {
			text-align: center;
			padding: 120px 0;
		}
	</style>
</head>

<body>
	<div class="empty">文件</div>
	<div id="test"></div>
	<script id="testTemplate" type="text/x-dot-template">
		<div><span>{{= it.code}}</span>--<span>{{= it.msg}}</span></div>
		{{~it.data:value:index}}
		<div>
			{{= index+1}}--{{= value.id}}--{{= value.username}}--{{= value.password}}--{{= value.role}}--{{= value.create_time}}
			<div>
				{{~}}
	</script>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script src="https://cdn.bootcss.com/dot/1.1.2/doT.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
	apiready = function() {
		refresh()
	}

	function refresh(){
		api.setRefreshHeaderInfo({
			loadingImg: 'widget://image/refresh.png',
			bgColor: '#ccc',
			textColor: '#fff',
			textDown: '下拉重新整理...',
			textUp: '鬆開重新整理...'
		}, function(ret, err) {
			//在這裡從伺服器載入資料，載入完成後呼叫api.refreshHeaderLoadDone()方法恢復元件到預設狀態
			if (ret) {
				test()
				api.refreshHeaderLoadDone()
			}else{
				console.log(err)
			}
		});
	}

	function test() {
		api.ajax({
			url: 'http://192.168.0.211:3000/userfindAll',
			method: 'get',
		}, function(ret, err) {
			if (ret) {
				var testTemplate = doT.template($("#testTemplate").text());
				$("#test").html(testTemplate(ret));
			} else {
				api.alert({
					msg: JSON.stringify(err)
				});
			}
		})
	}

</script>

複製程式碼

相關文章