iScroll实现下拉刷新上拉加载
前言
初学iscroll这个控件，给我的一个感觉还是蛮不错的。
什么是iScroll：是目前最成熟的自定义滚动解决方案之一，在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本
- iscroll.js 通用版 包含了大部分公共特性
- iscroll-lite.js 缩减版 削减了一些功能特性，例如：滚动条，鼠标滚轮等等
- iscroll-probe.js 探索版 此版本可以满足你获取滚动条位置的需求。
- iscroll-zoom.js 滚动缩放版
- iscroll-infinite.js 无限制版
使用
代码思路：利用监听滚动条的scroll事件，判断下拉或者上拉的距离，做上触发距离标记，当scrollEnd事件触发时，执行数据加载
这里自己要去引用<script src="js/iscroll-probe.js"></script>
html整个贴图代码
<!DOCTYPE html>
<html>
<head>
<title>pull to refresh</title>
<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">
<script src="js/iscroll-probe.js"></script>
</head>
<style>
body{
overflow: :hidden;
}
body,ul{
padding: 0;
margin: 0;
}
.main {
position: relative;
width: 100%;
height: 100%;
}
.main .warpper{
position: absolute;
width: 100%;
}
.scroller-pullDown, .scroller-pullUp {
width: 100%;
height: 30px;
padding: 10px 0;
text-align: center;
}
.dropdown-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
width: 100%;
background: #ddd;
line-height: 45px;
text-align: center;
color: #FFF;
border-bottom: 1px solid #FFF;
}
</style>
<script>
//模拟数据
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ,19 , 20];
function getContents() {
var li = "";
for (var i = 0; i < arr.length; i++) {
li += "<li>Item" + arr[i] + "</li>";
}
return li;
}
function appendContent(content) {
var ul = document.getElementById('Content');
ul.innerHTML = ul.innerHTML + content;
}
//返回文档中匹配指定 CSS 选择器的一个元素
var pullDown = document.querySelector("#PullDown");
var pullUp = document.querySelector("#PullUp");
var isPulled = false; // 拉动标记
window.onload = function(){
document.body.style.height = Math.max(document.documentElement.clientHeight,window.innerHeight||0)+'px';
appendContent(getContents());
//实例IScroll对象
var myScroll = new IScroll('#MyScroller', {
//probeType：
// 1 滚动不繁忙的时候触发
// 2 滚动时每隔一定时间触发
// 3 每滚动一像素触发一次
probeType: 3,
//是否监听鼠标滚轮事件
mouseWheel: true,
//是否显示默认滚动条
scrollbars: true,
//是否屏蔽默认事件
preventDefault: false,
//是否渐隐滚动条，关掉可以加速
fadeScrollbars: true
});
myScroll.on('scroll',function(){
var height = this.y;
var bottomHeight = this.maxScrollY - height;
//控制下拉显示
console.log('height',height);
if(height>=60){
PullDown.style.display = "block";
isPulled = true;
return;
}else if(height < 60 && height >= 0){
PullDown.style.display = "none";
return;
}
//控制上拉显示
if(bottomHeight >= 60){
PullUp.style.display = "block";
isPulled = true;
return;
}else if (bottomHeight < 60 && bottomHeight >= 0) {
PullUp.style.display = "none";
return;
}
})
myScroll.on('scrollEnd', function() { // 滚动结束
if (isPulled) { // 如果达到触发条件，则执行加载
isPulled = false;
appendContent(getContents());
myScroll.refresh();
}
});
}
</script>
<body>
<div id="MyScroller" class="main">
<div class="warpper">
<div id="PullDown" class="scroller-pullDown" style="display: none;">
<img style="width: 20px; height: 20px;" src="img/HBuilder.png" />
<span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
</div>
<ul id="Content" class="dropdown-list">
</ul>
<div id="PullUp" class="scroller-pullUp" style="display: none;">
<img style="width: 20px; height: 20px;" src="img/HBuilder.png" />
<span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
</div>
</div>
</div>
</body>
</html>
参考博客：http://imziv.com/blog/article/read.htm?id=73
iScroll实现下拉刷新上拉加载的更多相关文章
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...
随机推荐
- Java框架安全
(一)Mybatis注入问题 Mybatis是目前比较常用的ORM的框架,一般与SpringMVC框架整合较多,但使用不当会有SQL注入的风险. Mybatis里mapper中SQL语句的写法支持两种 ...
- sql server 数据库还原后sa连接不上原因
手动创建了一个同名数据库,然后还原以前或者别人的备份,还原虽然成功了,但是在VS中连接不上,原因可能是: 数据库的所有者中没有添加sa,方法即在数据库名上右击,然后选择文件,在所有者中添加上sa,应该 ...
- Android应用经典主界面框架之中的一个:仿QQ (使用Fragment, 附源代码)
备注:代码已传至https://github.com/yanzi1225627/FragmentProject_QQ 欢迎fork,如今来审视这份代码,非常多地方写的不太好,欢迎大家指正.有时间我会继 ...
- luogu P4168 [Violet]蒲公英
嘟嘟嘟 分块经典题竟然是一道黑题…… 分块求区间众数的大体思想是对于询问区间[L, R],预处理出这中间的整块的众数,然后统计两边零散的数在[L, R]中出现的次数,最后取出现次数最多且最小的数. 因 ...
- 【转】应用程序的入口是ActivityThread
ActivityThread运行框架 在分析中,我们可以看到真正对应应用进程的不是Application而是ActivityThread.我们从实际的应用堆栈可以看到: NavitiveStart.m ...
- SQL中char、varchar、nvarchar、text 的区别
char char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符. nvarchar(n) ...
- 【题解】洛谷 P1525 关押罪犯
题目 https://www.luogu.org/problemnew/show/P1525 思路 把所有边sort一遍从大到小排列 运用并查集思想敌人的敌人就是朋友 从最大边开始查找连着的两个罪犯 ...
- Spring知识点总结(六)之Spring事务
**************************************************************************************************** ...
- iOS 直播类APP开发流程解析
1 . 音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示1.数据采集:摄像机及拾音器收集视频及音频数据,此时得到的为原始数据涉及技术或协议:摄像机:CCD.C ...
- iOS百度地图简单使用详解
iOS百度地图简单使用详解 百度地图 iOS SDK是一套基于iOS 5.0及以上版本设备的应用程序接口,不仅提供展示地图的基本接口,还提供POI检索.路径规划.地图标注.离线地图.定位.周边雷达等丰 ...