<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">

    <title>Title</title>

    <script src="js/jquery.min.js"></script>

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

</head>

<style>

    *{margin:0px;padding:0px;}

    ul{list-style-type:none;}

    html,body{width:100%;height:100%;}

    header{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;}

    footer{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;}

     .box{width:100%;height:80%;overflow:hidden;}

    #wrap{width:100%;height:auto;}

    .shuaxin{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;}

    #wrap li{width:100%;line-height:150px;color:yellow;background:blue;text-align:center;border-bottom:1px dashed yellow;}

    .jiazai{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;}

</style>

<body>

<header>这个就是测试上拉加载和下拉刷新</header>

<div class="shuaxin">你在下拉刷新</div>

 <div class="box">

      <ul id="wrap">

          <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>

      </ul>

 </div>

<div class="jiazai">你是在上拉加载</div>

<footer>这个就是底部</footer>

</body>

<script>

    $(function(){

        var myscroll = new IScroll('.box');

        $(document).on("touchend",function(){

            console.log(myscroll.y);

            if(myscroll.y==0)

            {

                $(".shuaxin").hide();

            }

            if(myscroll.y==myscroll.maxScrollY)

            {

                $(".jiazai").hide();

            }

              myscroll.refresh();

        });

        $(document).on("touchmove",function(){

            console.log(myscroll.y);

            if(myscroll.y>20)

            {

              $(".shuaxin").show();

            }

            if(myscroll.y<myscroll.maxScrollY-20)

            {

                $(".jiazai").show();

            }

        })

    })

</script>

</html>

p.s. 记得引入JQ和iscroll.js

参考链接：https://www.jianshu.com/p/e6127f1e654f

iscroll 上拉加载和下拉刷新的更多相关文章

  1. 使用mescroll实现上拉加载与下拉刷新

    现在上拉加载与下拉刷新几乎已经是移动端必备功能之一了,自己实现一个太麻烦,但是好用的插件又非常少.之前看到网上很多人都在用iScroll,于是也尝试用它做了几个DEMO,但或多或少都有一些问题,比如这 ...

  2. JavaScript如何实现上拉加载，下拉刷新？

    转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...

  3. UITableView与UISearchController搜索及上拉加载，下拉刷新

    #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...

  4. Vue-上拉加载与下拉刷新（mint-ui：loadmore）一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...

  5. vue.js移动端app实战4：上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  6. 移动端上拉加载，下拉刷新效果Demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  8. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  9. 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题

    前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...

随机推荐

  1. Nginx:413 Request Entity Too Large 的解决方法

    报错信息413 Request Entity Too Large 解决方法: (20M大小,自己调节,根据文件大小.)修改 php 的配置文件 /etc/php5/fpm/php.ini upload ...

  2. Java学习之JVM、JRE、JDK联系与区别

    JVM,全称是Java Virtual Machine,翻译为Java虚拟机: JRE,全称是Java Runtime Environment,翻译为Java运行时环境: JDK,全称是Java De ...

  3. IK分词器 原理分析 源码解析

    IK分词器在是一款 基于词典和规则 的中文分词器.本文讲解的IK分词器是独立于elasticsearch.Lucene.solr,可以直接用在java代码中的部分.关于如何开发es分词插件,后续会有文 ...

  4. D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

    坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...

  5. MapReduce1.0的缺陷

  6. JS对象 Date 日期对象 日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。 定义一个时间对象 : var Udate=new Date();Date()的首字母须大写

    Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首 ...

  7. Java学习 时间类 Period类与Duration类 / LocalDate类与Instant类 用法详解

    前言 java 8 中引入的两个与日期相关的新类:Period 和 Duration.两个类看表示时间量或两个日期之间的差,两者之间的差异为:Period基于日期值,而Duration基于时间值.他们 ...

  8. hdu6089 Rikka with Terrorist

    题意:n*m的平面内有K个不安全点,Q个询问位置在(x,y)的人能走到多少个点?走到:(x,y)和(x',y')之间的矩形中不包含不安全点. 标程: #include<bits/stdc++.h ...

  9. C(n,m)的奇偶性判断

    C(n,m)的奇偶性判断奇数:当且仅当(n&m)==m偶数:否则为偶数证明:根据卢卡斯定理,c(n,m)%2=c(n%2,m%2)*c((n>>1),(m>>1))%2 ...

  10. 总结加密、机密jar中的class

    1.加密和解密部署到jboss中间件中的的单个class文件,原理:使用“java源程序加密解决方案(基于Classloader解密) (2014-07-13 11:31)”blog即可实现: imp ...