前言

初学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实现下拉刷新上拉加载的更多相关文章

  1. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  2. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  3. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  4. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  5. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  8. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  9. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  10. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

随机推荐

  1. C# 64位win7下DllImport LoadLibrary函数失败 z

    [DllImport["kernel32.dll"]] static extern IntPtr LoadLibrary(string lpFileName); public vo ...

  2. Linux下创建vue项目

    前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...

  3. WAKE-WIN10-SOFT-软件-Matlab配置及工具箱

    1Matlab 1,1Matlab下载,安装,配置,,, 1,2 2工具箱 2,1LibSVM 必应:https://www.bing.com/search?q=libsvm&qs=n& ...

  4. 小组Scrum第一次冲刺

    团队任务描述: 在确定完分组,并对于敏捷开发做了相应的了解之后,我们团队开始了第一次的冲刺.对于我们团队的第一次的 Scrum冲刺,我们团队开展了团队会议.首先,我们明确了我们的目标,对其进行了相对初 ...

  5. [原] Android自动打包之命令行打包

    Android自动打包流程详细图: 总结为以下几个步骤: 1. 生成R文件 2. Java代码编译成class文件 3. class文件生成dex文件 4. 打包资源 5. 生成apk 6. 创建密匙 ...

  6. [转]Linux学习

    Linux简介与厂商版本 http://www.cnblogs.com/vamei/archive/2012/09/04/2671103.html Linux开机启动(bootstrap) http: ...

  7. SSD 从形式到实质之改变

    SSD 从形式到实质之改变  作者:廖恒          SSD的物理尺寸之混战正在进行其中. 数据中心的硬件架构师由于要规划下一代server的机械设计.还要制定JBOD的设计规范,想必面临不少困 ...

  8. 比較全的XML系列工具 能够轻松实现排版、转换和打印！

    XML系列 --------------------------------------------------------------------------------1.Xsl Formatte ...

  9. [SCOI2014]方伯伯运椰子

    嘟嘟嘟 01分数规划思维题. 题中要求交通总量不减少,那么如果总量增加的话,总费用就会增加,所以一定不是更优的解.那么总量守恒. 这是不是就想到了网络流?对于每一个节点流入量等于流出量.然后就是很有思 ...

  10. 解决Sublime Text乱码问题

    第一步:安装Package Control 大家如果是在官网下载的Sublime Text 3,那么首先需要安装一个 Package Control包,这是一个用来安装其他插件的包,不管装什么插件,首 ...