<!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. Python3 From Zero——{最初的意识：000～Initial consciousness}

    http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 a.编码 默认情况下,Python ...

  2. 剑指offer——23调整数组顺序使奇数位于偶数前面

    题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变.   题解: 一种是数 ...

  3. 《DSP using MATLAB》Problem 9.4

    只放第1小题. 代码: %% ------------------------------------------------------------------------ %% Output In ...

  4. elasticsearch的基本用法(转载)

    本文出自:http://blog.csdn.net/feelig/article/details/8499614 最大的特点:  1. 数据库的 database, 就是  index  2. 数据库 ...

  5. mssql查询表在哪个数据库中

    mssql查询表在哪个数据库中 EXEC sp_MSforeachdb @command1='IF object_id(''?'' + ''..表名'') IS NOT NULL PRINT ''?' ...

  6. ASP.NET打开项目错误：将指定的计数添加到该信号量中会导致其超过最大计数。

    1.错误如图 2.解决方案 重启IIS即可,运行-> 输入IISRESET 命令 即可重启IIS,如图

  7. 【模板篇】A* 寻路算法

    上次在做k短路的时候说到了A*, 但是并没有仔细的研究A*寻路, 毕竟k短路中的A*也不怎么标准… A*寻路的过程网上还是有很多的, 讲得也很清楚, 不妨跟着里面的图示自己动手操作一下, 基本一遍就能 ...

  8. JMeter设置响应数据的编码格式

    1.修改配置文件jmeter.properties第974行,默认编码格式为ISO-8859-1,手动修改为UTF-8 2.增加元器件 在线程组右键,添加->后置处理器->BeanShel ...

  9. rem换算公式

    当前rem基准值=预设的基准值/设计稿宽度*当前设备的宽度

  10. python的update方法

    b = {"c":0, "position":{}} b["position"]["IF"] = {} print(b) ...