基于iscroll.js实现下拉刷新和上拉加载效果

最新推荐文章于 2021-08-22 01:40:10 发布
整理琐碎的记忆
最新推荐文章于 2021-08-22 01:40:10 发布
阅读量1.6k
点赞数
分类专栏：移动端文章标签：移动端下拉刷新上拉加载
移动端专栏收录该内容
2 篇文章
订阅专栏
本文介绍如何使用iScroll插件实现移动端H5页面的上拉加载更多及下拉刷新功能，通过自定义事件触发数据加载并更新界面。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
现在已经不是纯Android独霸天下的时代了，H5嵌入Android的Hybrid混合开发是大势所趋。今天给大家带来的就是移动端中常见的“上拉刷新，下拉加载”特效，这个特效将会基于H5来实现。 借助iScroll插件 兼容性也能很好的实现(包括安卓跟IOS)

在看文章之前请先阅读iScroll那篇文章方便更好的理解实现的过程 用的是4.2.5版本

<!DOCTYPE
 html>

<html>

<head>

 <meta

http-equiv="Content-Type"

content="text/html;
 charset=utf-8">

 <meta

name="viewport"

content="width=device-width,
 initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

 <meta

name="apple-mobile-web-app-capable"

content="yes">

 <meta

name="apple-mobile-web-app-status-bar-style"

content="black">

 <title>iScroll
 实例：下拉刷新，滚动翻页</title>

 <style

type="text/css"

media="all">

  body,ul,li
 {

   padding:0;

   margin:0;

   border:0;

  }

  body
 {

   font-size:12px;

   -webkit-user-select:none;

   -webkit-text-size-adjust:none;

   font-family:helvetica;

  }

  #header
 {

   position:absolute;

   top:0;
 left:0;

   width:100%;

   height:45px;

   line-height:45px;

   background-image:-webkit-gradient(linear,
 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));

   background-image:-moz-linear-gradient(top,
 #fe96c9, #d51875 5%, #7b0a2e);

   background-image:-o-linear-gradient(top,
 #fe96c9, #d51875 5%, #7b0a2e);

   padding:0;

   color:#eee;

   font-size:20px;

   text-align:center;

  }

  #header
 a {

   color:#f3f3f3;

   text-decoration:none;

   font-weight:bold;

   text-shadow:0
 -1px 0 rgba(0,0,0,0.5);

  }

  #footer
 {

   position:absolute;

   bottom:0;
 left:0;

   width:100%;

   height:48px;

   background-image:-webkit-gradient(linear,
 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));

   background-image:-moz-linear-gradient(top,
 #999, #666 2%, #222);

   background-image:-o-linear-gradient(top,
 #999, #666 2%, #222);

   padding:0;

   border-top:1px
 solid #444;

  }

  #wrapper
 {

   position:absolute;
 z-index:1;

   top:45px;
 bottom:48px; left:0;

   width:100%;

   background:#555;

   overflow:auto;

  }

  #scroller
 {

   position:relative;

  /*
 -webkit-touch-callout:none;*/

   -webkit-tap-highlight-color:rgba(0,0,0,0);

   float:left;

   width:100%;

   padding:0;

  }

  #scroller
 ul {

   position:relative;

   list-style:none;

   padding:0;

   margin:0;

   width:100%;

   text-align:left;

  }

  #scroller
 li {

   padding:0
 10px;

   height:40px;

   line-height:40px;

   border-bottom:1px
 solid #ccc;

   border-top:1px
 solid #fff;

   background-color:#fafafa;

   font-size:14px;

  }

  #scroller
 li > a {

   display:block;

  }

  /**

   *

   *
 下拉样式 Pull down styles

   *

   */

  #pullDown,
 #pullUp {

   background:#fff;

   height:40px;

   line-height:40px;

   padding:5px
 10px;

   border-bottom:1px
 solid #ccc;

   font-weight:bold;

   font-size:14px;

   color:#888;

  }

  #pullDown
 .pullDownIcon, #pullUp .pullUpIcon {

   display:block;
 float:left;

   width:40px;
 height:40px;

   background:url(pull-icon@2x.png)
 0 0 no-repeat;

   -webkit-background-size:40px
 80px; background-size:40px 80px;

   -webkit-transition-property:-webkit-transform;

   -webkit-transition-duration:250ms;

  }

  #pullDown
 .pullDownIcon {

   -webkit-transform:rotate(0deg)
 translateZ(0);

  }

  #pullUp
 .pullUpIcon {

   -webkit-transform:rotate(-180deg)
 translateZ(0);

  }

  /**

   *
 动画效果css3代码

   */

  #pullDown.flip
 .pullDownIcon {

   -webkit-transform:rotate(-180deg)
 translateZ(0);

  }

  #pullUp.flip
 .pullUpIcon {

   -webkit-transform:rotate(0deg)
 translateZ(0);

  }

  #pullDown.loading
 .pullDownIcon, #pullUp.loading .pullUpIcon {

   background-position:0
 100%;

   -webkit-transform:rotate(0deg)
 translateZ(0);

   -webkit-transition-duration:0ms;

   -webkit-animation-name:loading;

   -webkit-animation-duration:2s;

   -webkit-animation-iteration-count:infinite;

   -webkit-animation-timing-function:linear;

  }

  @-webkit-keyframes
 loading {

   from
 { -webkit-transform:rotate(0deg) translateZ(0); }

   to
 { -webkit-transform:rotate(360deg) translateZ(0); }

  }

 </style>

</head>

<body>

 <div

id="header">

  <a

href="../db.html#page2">iScroll实例：下拉刷新，滚动翻页</a>

 </div>

 <div

id="wrapper">

  <div

id="scroller">

   <div

id="pullDown">

    <span

class="pullDownIcon"></span><span

class="pullDownLabel">下拉刷新...</span>

   </div>

   <ul

id="thelist">

    <li>我是三冰
 1</li>

    <li>我是三冰
 2</li>

    <li>我是三冰
 3</li>

    <li>我是三冰
 4</li>

    <li>我是三冰
 5</li>

    <li>我是三冰
 6</li>

    <li>我是三冰
 7</li>

    <li>我是三冰
 8</li>

    <li>我是三冰
 9</li>

    <li>我是三冰
 10</li>

    <li>我是三冰
 11</li>

    <li>我是三冰
 12</li>

    <li>我是三冰
 13</li>

   </ul>

   <div

id="pullUp">

    <span

class="pullUpIcon"></span><span

class="pullUpLabel">上拉加载更多...</span>

   </div>

  </div>

 </div>

 <div

id="footer"></div>

<script

type="application/javascript"

src="iscroll.js"></script>

<script

type="text/javascript">

var
 myScroll,

 pullDownEl,
 pullDownOffset,

 pullUpEl,
 pullUpOffset,

 generatedCount
 = 0;

/**

 *
 下拉刷新 （自定义实现此方法）

 *
 myScroll.refresh();  // 数据加载完成后，调用界面更新方法

 */

function
 pullDownAction () {

 setTimeout(function
 () { // <-- Simulate network congestion, remove setTimeout from production!

  var
 el, li, i;

  el
 = document.getElementById('thelist');

  for
 (i=0; i<3;
 i++) {

   li

= document.createElement('li');

   li.innerText

= '添加三冰
 ' 
+ (++generatedCount);

   el.insertBefore(li,
 el.childNodes[0]);

  }

  myScroll.refresh(); 
 //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)

 },
 1000); // <-- Simulate network congestion, remove setTimeout from production!

}

/**

 *
 滚动翻页 （自定义实现此方法）

 *
 myScroll.refresh();  // 数据加载完成后，调用界面更新方法

 */

function
 pullUpAction () {

 setTimeout(function
 () { // <-- Simulate network congestion, remove setTimeout from production!

  var
 el, li, i;

  el

= document.getElementById('thelist');

  for
 (i=0;
 i<3; i++) {

   li

= document.createElement('li');

   li.innerText

= '添加三冰
 ' 
+ (++generatedCount);

   el.appendChild(li,
 el.childNodes[0]);

  }

  myScroll.refresh(); 
 // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)

 },
 1000); // <-- Simulate network congestion, remove setTimeout from production!

}

/**

 *
 初始化iScroll控件

 */

function
 loaded() {

 pullDownEl

= document.getElementById('pullDown');

 pullDownOffset

= pullDownEl.offsetHeight;

 pullUpEl

= document.getElementById('pullUp');

 pullUpOffset

= pullUpEl.offsetHeight;

 myScroll

= new

iScroll('wrapper', {

  scrollbarClass:
 'myScrollbar', /* 重要样式 */

  useTransition:
 false, /* 此属性不知用意，本人从true改为false */

  topOffset:
 pullDownOffset,

  onRefresh:
 function () {

   if
 (pullDownEl.className.match('loading')) {

    pullDownEl.className

= '';

    pullDownEl.querySelector('.pullDownLabel').innerHTML

= '下拉刷新...';

   }
 else if (pullUpEl.className.match('loading')) {

    pullUpEl.className

= '';

    pullUpEl.querySelector('.pullUpLabel').innerHTML

= '上拉加载更多...';

   }

  },

  onScrollMove:
 function () {

   if
 (this.y > 5 && !pullDownEl.className.match('flip')) {

    pullDownEl.className
 = 'flip';

    pullDownEl.querySelector('.pullDownLabel').innerHTML
 = '松手开始更新...';

    this.minScrollY
 = 0;

   }
 else if (this.y < 5

&& pullDownEl.className.match('flip')) {

    pullDownEl.className

= '';

    pullDownEl.querySelector('.pullDownLabel').innerHTML

= '下拉刷新...';

    this.minScrollY
 = -pullDownOffset;

   }
 else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {

    pullUpEl.className

= 'flip';

    pullUpEl.querySelector('.pullUpLabel').innerHTML

= '松手开始更新...';

    this.maxScrollY

= this.maxScrollY;

   }
 else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {

    pullUpEl.className
 = '';

    pullUpEl.querySelector('.pullUpLabel').innerHTML
 = '上拉加载更多...';

    this.maxScrollY
 = pullUpOffset;

   }

  },

  onScrollEnd:
 function () {

   if
 (pullDownEl.className.match('flip')) {

    pullDownEl.className
 = 'loading';

    pullDownEl.querySelector('.pullDownLabel').innerHTML
 = '加载中...';    

    pullDownAction();
 // Execute custom function (ajax call?)

   }
 else if (pullUpEl.className.match('flip')) {

    pullUpEl.className
 = 'loading';

    pullUpEl.querySelector('.pullUpLabel').innerHTML
 = '加载中...';    

    pullUpAction();
 // Execute custom function (ajax call?)

   }

  }

 });

 setTimeout(function
 () { document.getElementById('wrapper').style.left = '0'; }, 800);

}

//初始化绑定iScroll控件

document.addEventListener('touchmove',
 function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded',
 loaded, false);

</script>

</body>

</html>