您的位置：首页 > 移动开发

原生js手机App页面下拉加载效果

2017-01-18 00:00 162 查看

下拉效果要用固定的DOM结构，MUI也必须要用固定的DOM结构，随手写了一个原生的

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>血氧指数</title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link href="../../css/mui.min.css" rel="stylesheet" />

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

</head>

<body>

<header class="mui-bar mui-bar-nav">

<a class="mui-action-back">

<b class="mui-icon mui-icon-left-nav mui-pull-left c5"></b>

<h1 class="mui-title mui-text-left c5">血氧指数</h1>

</a>

<a class="mui-icon mui-icon-plusempty mui-pull-right c5" id="record"></a>

</header>

<div id="pullDown" style="top: 0px;">使劲。。</div>

<div class="mui-content jays-content" id="down" style="margin-top: 0px;">

<div class="jays-top">

<div class="mui-row mui-text-center">

<div class=" mui-row mui-col-sm-7 mui-col-xs-7 jays-user">

<div class="mui-col-sm-12 mui-col-xs-12 mb6">

<h3 class="c1">未知</h3>

</div>

<div class="mui-col-sm-7 mui-col-xs-7 mb6">

<h4 class="c1"><span id="first">--</span>/<span id="second">--</span></h4>

<span class="c2 f12"> ％</span>

</div>

<div class="mui-col-sm-5 mui-col-xs-5">

<h4 class="c1" id="third"></h4>

<span class="c2 f12">bpm</span>

</div>

<div class="mui-col-sm-12 mui-col-xs-12 c1 f12" id="lastTime">2016-12-22 10:26</div>

</div>

<div class="mui-col-sm-5 mui-col-xs-5 mui-text-center">

<div class="jays-user-padded c1 f10">

<img src="../../images/user_logo.jpg" alt="" />

<p class="c1 f12">我</p>

健康的<br /> 美丽的

<br /> 快乐的

</div>

</div>

</div>

</div>

<div class="jays-advice">

<a href="#" class="c5 f12">医师咨询 <span class="mui-icon mui-icon-arrowright mui-pull-right"></span> </a>

</div>

<div class="jays-trend">

<div class="mui-text-center c3 f12" id="history">血氧记录<span class="mui-icon mui-icon-arrowright mui-pull-right c5"></span></div>

<div class="jays-chart" id="lineChart"></div>

</div>

</div>

<script type="text/javascript">

function pullDown() {

var isMoving = false;

var currentY = 0;

var timer;

document.body.addEventListener('touchstart', function(e) {

e.preventDefault();

clearInterval(timer);

var val = parseInt(document.getElementById("pullDown").style.top);

var startY = e.touches[0];

var downY = startY.clientY;

isMoving = true;

document.body.addEventListener('touchmove', function(event) {

event.preventDefault();

currentY = val * 4;

if(isMoving == false) return;

var movedY = event.touches[0];

var moveY = movedY.clientY;

var changeY = downY - moveY;

if(changeY >= 0) { //上滑

currentY -= changeY;

} else { //下滑

changeY = -changeY;

currentY += changeY;

}

if(currentY / 4 <= 0) {

document.getElementById("pullDown").style.top = 0;

document.getElementById("down").style.marginTop = 0;

document.getElementById("pullDown").innerHTML = '使劲。。';

} else if(currentY / 4 > 44) {

document.getElementById("pullDown").style.top = 44 + "px";

document.getElementById("down").style.marginTop = 44 + "px";

document.getElementById("pullDown").innerHTML = '放手是一种智慧。。';

} else {

document.getElementById("pullDown").style.top = currentY / 4 + "px";

document.getElementById("down").style.marginTop = currentY / 4 + "px";

}

});

});

document.body.addEventListener('touchend', function() {

isMoving = false;

var topVal = parseInt(document.getElementById("pullDown").style.top);

timer = setInterval(function() {

topVal -= 1;

if(topVal >= 0) {

document.getElementById("pullDown").style.top = topVal + "px";

document.getElementById("down").style.marginTop = topVal + "px";

} else {

document.getElementById("pullDown").style.top = 0 + "px";

document.getElementById("down").style.marginTop = 0 + "px";

}

}, 20);

});

}

window.onload = function() {

pullDown();

}

</script>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航