您的位置：首页 > 产品设计 > UI/UE

MUI动态页面b1子页面mui

2017-01-18 00:00 218 查看

dcloud动态页面b1子页面mui

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>血压历史记录</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.min.css">

<link href="../../css/icons-extra.css" rel="stylesheet" />

<link rel="stylesheet" href="../../css/health.css" />

<style>

.mui-icon-extra.mui-icon-extra-outline {

font-size: px;

color: #646464;

float: left;

}

.mui-navigate-right:after,

.mui-push-right:after {

color: #ec6941;

}

.jays-record-datetime {

color: #7d7d7d;

margin-left: 10px;

}

/*.mui-icon-extra.mui-icon-extra-lamp{font-size: 26px; color: #ec6941;}

.mui-icon-extra.mui-icon-extra-lamp + .jays-record-datetime{color: #ec6941; font-weight: 300;}

.worning-msg{margin-left: 35px; color: #ec6941; font-weight: 200;}*/

.tapin-msg {

margin-left: 32px;

font-weight: 300;

}

</style>

</head>

<body>



<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

<div class="mui-scroll">



<ul class="mui-table-view mui-table-view-chevron" id="all">



</ul>

</div>

</div>

<script src="../../js/mui.min.js"></script>

<script>

mui.init({

pullRefresh: {

container: '#pullrefresh',

down: {

callback: pulldownRefresh

},

up: {

contentrefresh: '正在加载...',

callback: pullupRefresh

}

}

});

/**

* 下拉刷新具体业务实现

*/

function pulldownRefresh() {

setTimeout(function() {

var table = document.body.querySelector('.mui-table-view');

var cells = document.body.querySelectorAll('.mui-table-view-cell');

mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed

}, 1000);

}

var count = 1;

/**

* 上拉加载具体业务实现

*/

var me = false;

function pullupRefresh() {

mui.ajax('', {

data: {

access_token: '',

page: count++

},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: 10000, //超时时间设置为10秒；

//headers:{'Content-Type':'application/json'},

success: function(data) {

//console.log(JSON.stringify(data));

if(data.code == 1) {

if(data.data.list.length == 0) {

me = true;

}

setTimeout(function() {

mui('#pullrefresh').pullRefresh().endPullupToRefresh(me); //参数为true代表没有更多数据了。

var table = document.body.querySelector('.mui-table-view');

var cells = document.body.querySelectorAll('.mui-table-view-cell');

for(var i = 0; i < data.data.list.length; i++) {

var li = document.createElement('li');

li.className = 'mui-table-view-cell';

li.setAttribute('data-blood-pressure-id', data.data.list[i].blood_pressure_id);

li.setAttribute('data-diastolic', data.data.list[i].diastolic);

li.setAttribute('data-pulse', data.data.list[i].pulse);

li.setAttribute('data-systolic', data.data.list[i].systolic);

li.setAttribute('data-created-at', data.data.list[i].created_at);

li.innerHTML = "<a class='mui-navigate-right'><span class='mui-icon-extra mui-icon-extra-outline'></span>" +

"<span class='jays-record-datetime' >" + data.data.list[i].created_at + "</span>" +

"<p class='tapin-msg'>点击查看详情</p></a>";

table.appendChild(li);

}

}, 1000);

} else {

mui.toast(data.msg);

}

},

error: function(xhr, type, errorThrown) {

mui.toast('系统异常');

}

});

}

if(mui.os.plus) {

mui.plusReady(function() {

setTimeout(function() {

mui('#pullrefresh').pullRefresh().pullupLoading();

}, 1000);

});

} else {

mui.ready(function() {

mui('#pullrefresh').pullRefresh().pullupLoading();

});

}

mui("body").on('tap', '.mui-table-view-cell', function() {

var blood_pressure_id = this.getAttribute("data-blood-pressure-id");

var diastolic = this.getAttribute("data-diastolic");

var pulse = this.getAttribute("data-pulse");

var createdAt = this.getAttribute("data-created-at");

var systolic = this.getAttribute("data-systolic");

mui.openWindow({

url: 'blood_pressure_history.html',

id: 'blood_pressure_history.html',

show: {

aniShow: 'slide-in-right',

duration: 200

},

extras: {

idss: {

blood_pressure_id: blood_pressure_id,

pulse: pulse,

createdAt: createdAt,

diastolic: diastolic,

systolic: systolic

}

},

waiting: {

autoShow: false

}

});

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航