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

最新推荐文章于 2021-08-22 01:40:10 发布
最新推荐文章于 2021-08-22 01:40:10 发布
阅读量1.5k 收藏
点赞数
分类专栏： 移动端 文章标签： 移动端 下拉刷新 上拉加载

现在已经不是纯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 >

整理琐碎的记忆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
java h5 上拉加载更多_H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多
weixin_39910523的博客
02-24 170
前言在我之前的项目中，页面总是干巴巴的，用户的体验不是特别完美，我也是一直觉得把设计师给到的psd做出来就好，很少考虑用户的感受。我喜欢看不同的App,操作每个步骤，观赏每个能和我互动的交互设计效果，我很喜欢。感觉有回应。现在开始实现我页面的第一个交互效果，让我的页面更生动一点。实现的插件基于iScroll.js插件代码html我是头部固定 下拉刷新 我是小公举我是小公举我是小公举我是小公举我是小...
(手机移动web)iscroll+html5+css3+js实现下拉刷新上拉分页的功能
01-17
基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo，兼容pc、android、ios、wp等设备。解决了上拉分页footer存在bug的问题。 支持chrome、ff、opera、360浏览器、百度浏览器、qq浏览器等众多主流浏览器。
iscroll.js实现下拉刷新上拉加载
07-31
iscroll.js实现下拉刷新上拉加载
基于iscroll.js实现下拉刷新和上拉加载特效
weixin_33965305的博客
11-24 138
现在已经不是纯Android独霸天下的时代了，H5嵌入Android的Hybrid混合开发是大势所趋。今天给大家带来的就是移动端中常见的“上拉刷新，下拉加载”特效，这个特效将会基于H5来实现。 先看下运行效果： 是不是有点小小的‘鸡冻’ ，它就是由我们今天要介绍的主人公‘iscroll.js’实现的，接下来我以最最简便的方式教给大家~~ 实现步骤 一、准备好iscroll.js库 到官网下载即可...
H5基于iScroll实现下拉刷新和上拉加载更多
12-08
前言       前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果，脑海里第一反映就是微博那种效果，刚开始的理解有些偏差，以为下拉也是追加数据，上拉也是追加数据，后请教同事后发现其实下拉只是刷新最新数据而已，上拉是追加数据。 使用技巧       1、引用iScroll.js， 在初始化时添加两个事件监听：touchMove、DOMContentLoaded。       2、实现iScroll插件的onScrollEnd事件， 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。       3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
09-02
本文主要介绍在HTML5中使用iScroll实现下拉刷新，上拉加载更多数据的方法，主要就是写了两个自定义函数pullDownAction和pullUpAction，分别在下拉和上拉的事件中调用他们。
iscroll.js手机触屏滑动上拉加载和下拉刷新代码.zip
最新发布
09-27
总结，iscroll.js是实现移动设备上高质量滚动效果的重要工具，通过其提供的上拉加载和下拉刷新功能，可以极大地提升用户的浏览体验。结合HTML5技术，开发者可以轻松构建出具有动态加载和实时刷新功能的移动网页应用...
iscroll-probe实现下拉刷新和下拉加载效果
08-30
iscroll-probe版本增加了实时探测滚动事件的功能，这使得它非常适合用于实现下拉刷新和上拉加载这样的交互效果，这两种效果在现代网页和应用中非常常见，用于动态加载更多数据或执行刷新操作。 下拉刷新（Pull-to-...
iScroll下拉刷新上滑加载
10-13
iScroll下拉刷新上滑加载; 使用经典插件iScroll4稍作封装，采用ajax请求数据，实现移动端列表页的功能; 1.下拉刷新当前列表页数据； 2.上滑加载更多列表数据； iScroll4简介： iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用） 提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是，这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的 中间区域。 然而，Android系统最新修订版已经可以支持这种功能了（尽管支持的力度还不是特别好），Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。 除了以前版本的iScroll的特性以外，iScroll 4还包括如下的特性： （1）缩放（Pinch/Zoom） （2）拉动刷新（Pull up/down to refresh） （3）速度和性能提升 （4）精确捕捉元素 （5）自定义滚动条 友情提示：iScroll 4并不是iScroll 3的简易替代版本，API文档已经不一样了。同时考虑到此版本正处于测试期，一些API可能会有细微的变化。
iscroll+html5+css3+js实现下拉刷新上拉分页的功能
08-08
基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo，兼容pc、android、ios、wp等设备。解决了上拉分页footer存在bug的问题。 支持chrome、ff、opera、360浏览器、百度浏览器、qq浏览器等众多主流浏览器。
iScroll5自优化下拉刷新(强迫症一本满足版)
10-16
基于5.1.3修改的iScroll-probe.js修改，修改内容：滚动条收缩时动画顺滑(计算又整数变为小数)，默认启用scroll事件(动作条滚动事件)，添加beforeScrollEnd事件，并提供下拉刷新
一款基于iscroll5的下拉刷新上拉加载的的插件
08-10
pullupRefresh-PullupLoadMore 基于iscroll上拉加载更多下拉刷新
基于iscroll实现下拉和上拉刷新
热门推荐
一名普通码农的菜地
04-09 7万+
基于iscroll实现下拉和上拉刷新 2015/02/07javascript、moblie、插件iscroll上拉刷新、js上拉刷新、js下拉刷新 在原生APP的开发中，有一个常见的功能，就是下拉刷新的功能，这个想必大家都是知道的，但是原生APP的开发，有一个很大的问题就是，你每次更新一些功能，就要用户重新下载一次版本，尤其是在IOS系统中，新版本还需要经过审核才能通过，这就使得
使用iScroll实现上拉或者下拉刷新
weixin_30794499的博客
06-07 267
上拉或者下拉刷新的需求在移动端是非常常见的需求，大部分情况下，实现这个效果都使用网上现有的解决方案，例如有人使用swiper这个插件， 也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。 iScroll简介 iScrool是目前最成熟的自定义滚动解决方案之一，在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本： iscroll.js...
iscroll 下拉刷新
qq_43512502的博客
07-16 1400
前端代码部门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> <...
iScroll实现【上拉加载下拉刷新】
qq_37833745的博客
08-22 630
iscroll 是一个 JS滚动插件， 特性：高性能，资源占用少(4kb大小)，无依赖，多平台 细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。 动画可以使用用户自定义的擦出功能（反弹'bounce'，弹性'elastic'，回退'back'，...）。 你可以很容易的挂靠大量的自定义事件（onBeforeScrollStart, * 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。 下拉刷新 iscroll ...
h5实现下拉刷新上拉加载（兼容iOS手机）
肖波的博客
12-28 7506
在移动端开发中经常会遇到上拉加载下拉刷新的分页的需求，本人在用jquery weui框架中的相应扩展组件的时候发现不太好用，于是有找了一下，发现了一个非常不错的组件iscroll4.js,现在好像官网不能进了，这里附一个下载链接:下载iscroll4.js. 查看演示:iscrollDemo 我们先来看一下属性。 属性： scrollbars: false 是否显示滚动条。默认为fals......
使用iscroll.js构建移动端下拉刷新与上拉加载功能
实现基于iscroll.js的下拉刷新和上拉加载效果的步骤如下： 1. 获取iscroll.js库： 首先，你需要从iscroll的官方GitHub仓库（https://github.com/cubiq/iscroll）下载最新版本的iscroll.js文件，并将其引入到你的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值