H5实现APP常有的滑动松开加载效果

这个效果我们在APP的交互里面经常见到,是个非常流行的加载方式。这里我用H5,CSS3,js来实现类似的效果分享给大家。先让大家看看实现出来的效果:

实现的思路从源码里面可以看出来,这里直接贴出来大家参考,欢迎指正。

css:

 html, body {margin: 0; padding: 0; height: 100%; overflow: hidden; }
 ul, li, h3 {margin: 0; padding: 0; }
 ul {list-style: none; }
 li {width: 50%; }
 li:nth-of-type(2n) {float: right; }
 li:nth-of-type(2n+1) {float: left; }
 ul:after, ul:before {content: ''; display: table; clear: both; }
 ul {zoom: 1 }
 img {display: block; width: 100%; height: 360px; }
 h3 {text-align: center; font-size: 2em; line-height: 2em; visibility: hidden; }

html:

<div id="wrap">
 <ul id="box">
 </ul>
 <h3 id="tips">松开加载更多图片...</h3>
</div>

js:

 window.onload = function() {
 LoadPics();
 document.addEventListener('touchstart', touchstart);
 document.addEventListener('touchmove', touchmove);
 document.addEventListener('touchend', touchend);
 var start = 0;
 var end = 0;
 var wrap = document.getElementById('wrap');
 var tip = document.getElementById('tips');
 var orginTransY = 0;
 var dis2 = 0;
 var dis3 = 0;

 function touchstart(event) {
 start = Math.round(event.changedTouches[0].pageY);
 orginTransY = cssTransform(wrap, 'translateY');
 wrap.removeEventListener('transitionend', transitionEnd);
 }

 function touchmove(event) {
 end = Math.round(event.changedTouches[0].pageY);
 var dis = end - start;
 dis2 = tip.offsetTop - document.body.clientHeight;
 if (Math.abs(cssTransform(wrap, 'translateY')) > dis2) {
 tip.style.visibility = 'visible';
 }
 dis3 = orginTransY + dis;
 //限制上滑的距离
 if (-1*dis3 > (dis2 + 300)) {
 dis3 = -1 * (dis2 + 300);
 }

 //限制下滑的距离
 if (dis3 <= 0) {
 cssTransform(wrap, 'translateY', dis3);
 }
 }

 function touchend(event) {
 dis2 = tip.offsetTop - document.body.clientHeight;
 dis3 = tip.offsetHeight + dis2;
 start = Math.round(event.changedTouches[0].pageY);
 orginTransY = cssTransform(wrap, 'translateY');

 //滑到底部进行加载数据
 if (Math.abs(orginTransY) >= dis2) {
 wrap.style.transition = 'transform .5s ease-in-out';
 cssTransform(wrap, 'translateY', -1 * dis3);
 wrap.addEventListener('transitionend', transitionEnd);
 }

 }

 function transitionEnd(event) {
 tip.innerHTML = '加载中...';
 wrap.style.transition = 'none';
 //这里模拟请求后台服务器的数据
 setTimeout(function() {
 tip.style.visibility = 'hidden';
 LoadPics();
 tip.innerHTML = '松开加载更多图片...';
 }, 1000);
 }
 }

 //设置transform属性,因为使用getComputedStyle获取的是矩阵不方便处理
 function cssTransform(elem, attr, val) {
 if (!elem.transform) {
 elem.transform = {
 translateY: 0
 };
 }
 if (typeof val == 'undefined') {
 return elem.transform[attr];
 } else {
 elem.transform[attr] = val;
 elem.style.WebkitTransform = elem.style.transform = attr + "(" + val + "px)";
 }
 }

 //加载图片(实际应用应该是请求后台API接口)
 function LoadPics() {
 var box = document.getElementById('box');
 var html = '';
 for (var i = 0; i < 12; i++) {
 html += '<li><img src="img/' + i % 8 + '.jpg" alt=""></li>';
 }
 box.innerHTML += html;
 }

当然,下滑加载数据可以类似的来实现。

作者:张雪飞
出处:https://zhangxuefei.site/p/1777
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注