- 上拉刷新demo
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Document</title>
- <style type="text/css">
- html,body,header,div,main,p,span,ul,li{ margin: 0; padding: 0; }
- #refreshContainer li{ background-color: #eee; margin-bottom: 1px; padding: 20px 10px; }
- .refreshText{ position: absolute; width: 100%; line-height: 50px; text-align: center; left: 0; top: 0; }
- </style>
- </head>
- <body>
- <main>
- <p class="refreshText"></p>
- <ul id="refreshContainer">
- <li>111</li>
- <li>222</li>
- <li>333</li>
- <li>444</li>
- <li>555</li>
- <li>111</li>
- <li>222</li>
- <li>333</li>
- <li>444</li>
- <li>555</li>
- <li>111</li>
- <li>222</li>
- <li>333</li>
- <li>444</li>
- <li>555</li>
- </ul>
- </main>
-
- <script type="text/javascript">
- (function(window) {
- var _element = document.getElementById('refreshContainer'),
- _refreshText = document.querySelector('.refreshText'),
- _startPos = 0,
- _transitionHeight = 0;
-
- _element.addEventListener('touchstart', function(e) {
- console.log('初始位置:', e.touches[0].pageY);
- _startPos = e.touches[0].pageY;
- _element.style.position = 'relative';
- _element.style.transition = 'transform 0s';
- }, false);
-
- _element.addEventListener('touchmove', function(e) {
- console.log('当前位置:', e.touches[0].pageY);
- _transitionHeight = e.touches[0].pageY - _startPos;
-
- if (_transitionHeight > 0 && _transitionHeight < 60) {
- _refreshText.innerText = '下拉刷新';
- _element.style.transform = 'translateY('+_transitionHeight+'px)';
-
- if (_transitionHeight > 55) {
- _refreshText.innerText = '释放更新';
- _element.append("<li>100</li>");
- }
- }
- }, false);
-
- _element.addEventListener('touchend', function(e) {
- _element.style.transition = 'transform 0.5s ease 1s';
- _element.style.transform = 'translateY(0px)';
- _refreshText.innerText = '更新中...';
-
- // todo...
-
- }, false);
- })(window);
- </script>
- </body>
- </html>
-
复制代码- 下拉加载更多demo
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Document</title>
- <style type="text/css">
- html,body,header,div,main,p,span,ul,li{ margin: 0; padding: 0; }
- #refreshContainer li{ background-color: #eee; margin-bottom: 1px; padding: 20px 10px; }
- .refreshText{ line-height: 50px; text-align: center; }
- </style>
- </head>
- <body>
- <main>
- <ul id="refreshContainer">
- <li>111</li>
- <li>222</li>
- <li>333</li>
- <li>444</li>
- <li>555</li>
- <li>111</li>
- <li>222</li>
- <li>333</li>
- <li>444</li>
- <li>555</li>
- <li>111</li>
- <li>222</li>
- <li>333</li>
- <li>444</li>
- <li>555</li>
- </ul>
- <p class="refreshText"></p>
- </main>
-
- <script type="text/javascript">
- (function(window) {
- // 获取当前滚动条的位置
- function getScrollTop() {
- var scrollTop = 0;
- if (document.documentElement && document.documentElement.scrollTop) {
- scrollTop = document.documentElement.scrollTop;
- } else if (document.body) {
- scrollTop = document.body.scrollTop;
- }
- return scrollTop;
- }
-
- // 获取当前可视范围的高度
- function getClientHeight() {
- var clientHeight = 0;
- if (document.body.clientHeight && document.documentElement.clientHeight) {
- clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
- }
- else {
- clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
- }
- return clientHeight;
- }
-
- // 获取文档完整的高度
- function getScrollHeight() {
- return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
- }
-
- var _text = document.querySelector('.refreshText'),
- _container = document.getElementById('refreshContainer');
-
- var throttle = function(method, context){
- clearTimeout(method.tId);
- method.tId = setTimeout(function(){
- method.call(context);
- }, 300);
- }
-
- function fetchData() {
- setTimeout(function() {
- _container.insertAdjacentHTML('beforeend', '<li>new add...</li>');
- }, 1000);
- }
-
- window.onscroll = function() {
- if (getScrollTop() + getClientHeight() == getScrollHeight()) {
- _text.innerText = '加载中...';
- throttle(fetchData);
- }
- };
-
- })(window);
- </script>
- </body>
- </html>
复制代码- 由于上面的demo针对是单页面且针对整个页面区,所以很多时候不大适合,下面这个例子是针对 div区域做的下拉刷新
- 滚动区域为div 的下拉刷新 demo
- 注:该demo相关的几个文件未给出,但关键代码已贴
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <title>下拉刷新-移动端</title>
-
- <script src="jscript/jquery-1.11.0.min.js" type="text/javascript"></script>
- <script src="jscript/util.js" type="text/javascript"></script>
- <script src="jscript/publish.js" type="text/javascript"></script>
-
- <link rel="stylesheet" href="css/mbase.css">
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- <style>
- .refreshText {
- line-height: 50px;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="header">
- <div style="width:10%;float:left; text-align:center; vertical-align:central;"><img src="mimages/nconlogo.png" style="width:75px;height:75px;"></div>
- <div style="width:75%;float:right; margin-left:10px;">
- <div class="nav">
- <a href="#" onclick="sel(this,2);">平面口罩</a>
- </div>
- </div>
-
- </div>
- <div class="content" id="div2">
- <p style="text-align:center;font-size:18px;margin-bottom:5px;margin-top:5px;">平面口罩</p>
- <div id="wraper1" style="overflow-y:auto; height:75vh;">
- <div style="margin-left:5px; " id="infoData2">
- 暂无信息
- </div>
- <p class="refreshText" id="refreshText1"></p>
- </div>
- </div>
- <div class="footer">
- <p>下拉刷新测试</p>
- </div>
-
- <script type="text/javascript">
-
- var content = document.getElementById('wraper1'); //滑动容器
- var _text = document.getElementById('refreshText1');
-
- (function (window) {
- $("#btnOk").click(function () {
- publish();
- });
-
- // 获取当前滚动条的位置
- function getScrollTop() {
- var scrollTop = 0;
- if (document.documentElement && content.scrollTop) {
- scrollTop = content.scrollTop;
- } else if (document.body) {
- scrollTop = document.body.scrollTop;
- }
- return scrollTop;
- }
-
- // 获取当前可视范围的高度
- function getClientHeight() {
- var clientHeight = 0;
- if (document.body.clientHeight && content.clientHeight) {
- clientHeight = Math.min(document.body.clientHeight, content.clientHeight);
- }
- else {
- clientHeight = Math.max(document.body.clientHeight, content.clientHeight);
- }
- return clientHeight;
- }
-
- // 获取文档完整的高度
- function getScrollHeight() {
- return Math.max(document.body.scrollHeight, content.scrollHeight);
- }
-
- var throttle = function (method, context) {
- clearTimeout(method.tId);
- method.tId = setTimeout(function () {
- method.call(context);
- }, 500);
- }
-
- function fetchData() {
- setTimeout(function () {
- //_container.insertAdjacentHTML('beforeend', '<li>new add...</li>');
- pageIndex++;
- getconinfoData(pageIndex, SmallpageSize);
- //alert("loading " + pageIndex+" 页 typeid="+CurrentTypeId);
- }, 1000);
- }
-
-
-
- // 触摸开始
- function boxTouchStart(e) {
- var touch = e.touches[0];
- startY = touch.pageY;
- }
-
- // 触摸移动
- function boxTouchMove(e) {
- var touch = e.touches[0];
- moveY = touch.pageY - startY;
- index = Number(e.target.id.split('page')[1])
-
- var htop = getScrollTop();
- var hch = getClientHeight();
- var sch = getScrollHeight();
- if (htop + hch >= sch) {
- _text.innerText = '加载中...';
- throttle(fetchData);
- }
- }
-
- content.addEventListener('touchstart', boxTouchStart, false)
- content.addEventListener('touchmove', boxTouchMove, false)
-
- })(window);
- </script>
- <script>
-
- function sel(fromobj, val) {
- //alert(val);
- CurrentTypeId = 2;
- $(".nav a").removeClass("active");
- $(fromobj).addClass("active");
- getconinfoData(pageIndex, SmallpageSize);
- }
- </script>
- </body>
- </html>
-
- getconinfoData为加载数据的js
-
- function getconinfoData(idx, size) {
- var val = CurrentTypeId;
- var typeId = parseInt(val) * 100;
-
- if (idx == 1) {
- //先清空
- $($("#infoData" + val)).html("");
- }
-
- var data = {};
- data.call = ReqDefaultInfo;
- var url = ReqDefaultDomain + "cov/list?typeId=" + typeId + "&pageIndex=" + idx + "&pageSize=" + size
- ajaxProcessForApi(url, data.call, function callSuccess(oRet) {
- var result = oRet.Data;
- var html = "";
- var tr = "<div class='listdata'><ul><li>产品名称:{PName}</li><li>注册证号:{RegisterNo}</li><li class='publisher'>注册人:{RegisterName}</li></ul></div>";
-
- $(result.Rows).each(function () {
- html += tr.format(this);
- });
- if (html.length < 10) {
- html = "暂无信息";
- $($("#refreshText" + val)).innerText = "已经到底了...";
- }
- $($("#infoData" + val)).append(html);
- }, function callError(e) {
- //alert(e);
- });
- }
- 页面绑定事件时加入了节流函数,其作用就是忽略滚动条300毫秒内的连续多次触发。
- 小结
- 上拉刷新的实现主要依靠的是touch事件的三个阶段,以及借助CSS3动画效果;下拉加载主要依靠页面的boxTouchMove事件,需要注意的是页面滚动时可能要考虑函数节流。
-
复制代码
|