<!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. Android Telephony分析(一) ---- Phone详解

    目录: Phone的继承关系与PhoneFactory(GsmCdmaPhone.ImsPhone.SipPhone) Phone进程的启动 Phone对象的初始化(DefaultPhoneNotif ...

  2. pytong下安装安装SK-Learn

    安装SK-Learn需要依赖的Python安装包有: Python (>= 2.6), NumPy (>= 1.3), SciPy (>= 0.7), 下载python的各种包的地址 ...

  3. 6-MySQL高级-索引

    索引 1. 思考 在图书馆中是如何找到一本书的? 一般的应用系统对比数据库的读写比例在10:1左右(即有10次查询操作时有1次写的操作), 而且插入操作和更新操作很少出现性能问题, 遇到最多.最容易出 ...

  4. 【转】WebResource实现在自定义控件中内嵌JS文件

    在类库中的资源  其他项目中要使用 需要嵌入才行 参考文献:WebResource实现在自定义控件中内嵌JS文件 1. WebResource简介 ASP.NET(1.0/1.1)给我们提供了一个开发 ...

  5. Linux sed -i 字符串替换

    sed -i 直接替换文件中的内容不输出, 如 将 laravel .env中的 QUEUE_DRIVER=sync 替换为 QUEUE_DRIVER=redis, 在Laravel的项目根目录中运行 ...

  6. CSIC_716_20191031【计算机的组成】

    引言 什么是编程语言 语言是人与人之间的沟通介质之一,编程语言是人与机器(包括计算机)之间沟通的介质. 一个完整的计算机系统主要包括     应用程序  .操作系统  和硬件   等. 计算机三大核心 ...

  7. Fence

    Fence 有一个长度为n的\([1,n]\)墙,有k位工人,第i位工人有参数\(s_i,p_i,l_i\),意思该位工人可以刷包含\(s_i\)的长度小于等于\(l_i\)的区间,报酬为区间长度乘以 ...

  8. arc098D Xor Sum 2

    题意:给你一个数列,问有多少对(l,r)满足A[l]+A[l+1]+...+A[r]=A[l]^A[l+1]^...^A[r]? 标程: #include<bits/stdc++.h> u ...

  9. CSS3——伸缩布局及应用

    CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...

  10. docker中国区镜像加速

    [root@syzyy ~]# vim /etc/docker/daemon.json { "registry-mirros":[ "https://registry.d ...