<!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. Python print命令/ 解压序列

    Python 命令参数  print 命令 : #默认的print是有个 空格,和换行的 # print(sep= ' ') # print(end = '/n') a = 'sunjinchao' ...

  2. Mysql 插入数据，随机事件选择

    在拼写sql的 时候,mysql字段如果需要添加当前时间可以用NOW() 函数 // String sql = ("insert into tablename(content, create ...

  3. git ssh使用公钥授权怎么都不通过

    前提: 1.客户端生成了id_rsa.pub和id_rsa 2.服务端在.ssh/authorized_keys也加入了客户端的id_res.pub 3./etc/ssh/sshd_config开启了 ...

  4. 用python, PIL在图像上添加文字（可以控制，调节为水印等）

    最近想在图像上,添加想要的文字,首先想到的是matplotlib,但是这个更加倾向于画图(柱状图,折线图之类) opencv这个库肯定也行,但是为了和我现有程序连接在一起,我选择了PIL 其中字体的设 ...

  5. 【转】详解tomcat的连接数与线程池

    对tomcat线程池.Connector的BIO.NIO解析的很透彻的一篇文章. 原文链接:https://www.cnblogs.com/kismetv/p/7806063.html 前言 在使用t ...

  6. 5、Docker数据管理

    为了能够存储持久化数据以及共享容器间的数据,Docker提出了Volume的概念.让我们通过类似mount的方式将宿主机的文件或者目录挂载到容器中. 在容器中管理数据主要有两种方式: 数据卷(Data ...

  7. activemq设置后台管理用户名密码，及生产者消息密码

    activemq设置后台管理用户名密码,及生产者消息密码 1.修改conf/activemq.xml 在<broker>标签下,找到</shutdownHooks>标签.在这个 ...

  8. 9.spark Core 进阶2--Cashe

          RDD Persistence One of the most important capabilities in Spark is persisting (or caching) a d ...

  9. log4j2 按日期分割，自动清理历史文件

    方式一:定义CronTriggeringPolicy <?xml version="1.0" encoding="UTF-8"?> <Conf ...

  10. C++ 贪吃蛇二维

    #include <iostream> #include <conio.h> #include <windows.h> #include <time.h> ...