H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多
前言
在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受。我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果,我很喜欢。感觉有回应。
现在开始实现我页面的第一个交互效果,让我的页面更生动一点。
实现的插件
基于iScroll.js插件
代码
html
<div class="header">我是头部固定</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown"> <span class="pullDownLabel">下拉刷新</span> </div>
<ul id="thelist">
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
</ul>
<div id="pullUp"><span class="pullUpLabel">上拉加载更多</span></div>
</div>
</div>
<div class=""footer>我是底部固定</div>
css
*{margin:0;padding:0}
body{font-size:12px}
li{list-style:none}
.header{position:absolute;top:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}
.footer{position:absolute;bottom:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}
#wrapper{position:absolute;top:45px;left:0;bottom:48px;width:100%;}
#wrapper #scroller .thelist li{height:60px;padding:0 10px;line-height:60px;background:#ecf6ff;margin-top:10px;}
#pullDown,#pullUp{height:30px;line-height:30px;padding:0 10px;color:#888;text-align:center}
javascript
<script type="text/javascript" src="js/iscroll.js"></script>
<script>
var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
function loaded(){
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight; //获取下拉刷新的div高度 30
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight; // 获取上拉加载的div高度 30
myScroll = new iScroll('wrapper',{
useTransition: true, //options.useTransition 默认为true,支持css transition 动画;
topOffset: pullDownOffset, //通过topOffset参数属性设置iScroll已经滚动的基准值;
onRefresh: function(){ //通过onRefresh参数方法调整刷新后的界面结构
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(){ //通过onScrollMove参数方法判断当前滚动是在顶端还是底端
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 = 'Pull down to refresh...' ;
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 = 'Pull up to load more...;
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function(){
if(pullDownEl.className.match('flip')){
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHtml = '加载中';
pullDownAction();
} else if(pullUpEl.className.match('flip')){
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHtml = '加载中';
pullUpAction();
}
},
});
loadAction();
};
document.addEventListener('touchmove',function(e){
e.preventDefaule();
},false); //阻止冒泡
document.addEventListener('DOMContentLoaded',function(){
setTimeout(loaded,0)
}.false); //当DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash。
//初始状态,加载数据
function loadAction(){
var el, li;
el = document.getElementById('thelist');
for(var i = 0; i < 10; i++){
li = doument.createElement('li');
li.innerHtml = '初始数据--' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
};
myScroll.refresh();
};
//下拉刷新当前数据
function pullDownAction(){
setTimeout(function(){
//这里执行刷新操作
myScroll.refresh();
},400);
};
//上拉加载更多数据
function pullUpAction(){
setTimeout(function() {
var el, li;
el = document.getElementById('thelist');
for(var i = 0; i < 10; i++){
li = doument.createElement('li');
li.innerText= '上拉加载--' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
};
myScroll.refresh();
},400);
}
//ajax
eg: function pullUpAction(){
setTimeout(function(){
var el, li, i;
document.getElementById("thelist");
//========================
$.ajax({
type: "GET",
url: "LoadMore.aspx",
data: { page: generatedCount },
dataType: "json",
success: function(data){
var json = data;
$(json).each(function(){
li = document.createElement('li');
li.innerHtml = ' XXXXXXXXXXXX';
el.insetBefore(li, el.childNodes[0]);
})
}
});
//==========================
myScroll.refesh();
},1000);
}
</script>
参考搬运代码地址:http://blog.csdn.net/xw505501936/article/details/48975991
H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多的更多相关文章
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
随机推荐
- 实现类似add(1)(2)(3)的函数
要求实现类似add(1)(2)(3)调用方式的方法,例如add为加法函数,则调用add(1)(2)输出3,调用add(1)(5)(3)输出9. 函数的调用方式是多次调用同一个函数,将每次传入的参数 ...
- Linux系统分区 进程管理 软件包安装
对于一块新的磁盘来说,系统能够使用需要有分区.格式化文件系统.挂载等主要操作,下面通过命令的方式对一块磁盘进行操作. 一. Linux系统分区 1.1 在虚拟机开机前选择虚拟机配置,添加一个新的SCS ...
- idea Please specify commit message
在idea中使用github来进行版本控制的时候, 当点击提交的时候遇到了这个问题 错误: Please specify commit message 解决方法: 在commit message中填写 ...
- idea下使用码云插件进行git提交
1)下载插件 file->setting->plugins->右侧搜索gitee->安装->重启ide 2)配置版本控制 file->setting->Ver ...
- msys2 使用指定boost
pacman -S mingw-w64-x86_64-toolchain make mingw-w64-x86_64-cmake mingw-w64-x86_64-openssl mingw-w64- ...
- baidumap demo(一)
覆盖物概述 地图上自定义的标注点和覆盖物我们统称为地图覆盖物.您可以通过定制BMKAnnotation和BMKOverlay来添加对应的标注点和覆盖物.地图覆盖物的设计遵循数据与View分离的原则,B ...
- C++高精度乘法
#include <cstdio> #include <iostream> #include <algorithm> void highPrecision (int ...
- CSS3-::selection
“::selection”只能设置两个属性,一个就是background,另一个就是color属性,设置其他属性是没有任何效果的. ::selection使用语法: /*Webkit,Opera9.5 ...
- Codeforces Round #877 (Div. 2) B. - Nikita and string
题目链接:http://codeforces.com/contest/877/problem/B Nikita and string time limit per test2 seconds memo ...
- PAT Basic 1015
1015 德才论 宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君子而与之,与其 ...