<!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. k8s 映射 外部服务

    把外部的服务,通过创建service和endpoint,把它映射到k8s内部来使用. 操作步骤: 在10.0.0.13上安装数据库 yum install mariadb-server -y syst ...

  2. 浅析AIDL的使用和工作原理

    AIDL是一种接口定义语言,用于生成可在Android设备上两个进程之间进行进程间通信(IPC)的代码. AIDL的使用 新建一个aidl文件,定义进程间通信的接口 // IStudentManage ...

  3. CSS3 RGBA等于RGB加上opacity吗?

    在我们前端设计里有两篇教程: CSS3 RGBA colors使用说明 css3中opacity属性学习与实践,他们公别介绍了RGBA,RGB,opacity的用法,这里我们把这三个属性放在一起来考虑 ...

  4. 《数据结构与算法分析——C语言描述》ADT实现(NO.02) : 队列(Queue)

    第三个结构——队列(Queue) 队列与上次的栈相反,是一种先进先出(FIFO)的线性表.写入时只暴露尾部,读取时只暴露头部. 本次只实现了数组形式的队列.原因是链表形式的队列极为简单,只需要实现简单 ...

  5. vue echart例——柱状图及高度自适应

    1.安装 npm install echarts -s 2.例——点击tab切换时柱状图重绘,高度根据返回数据设置. <template> <div> <ul id=&q ...

  6. mysql分区partition详解

    分区管理  论坛 1. RANGE和LIST分区的管理 针对非整形字段进行RANG\LIST分区建议使用COLUMNS分区.  RANGE COLUMNS是RANGE分区的一种特殊类型,它与RANGE ...

  7. UVALive7461 - Separating Pebbles 判断两个凸包相交

    //UVALive7461 - Separating Pebbles 判断两个凸包相交 #include <bits/stdc++.h> using namespace std; #def ...

  8. 2019 Multi-University Training Contest 7 Kejin Player 期望dp

    题目传送门 题意:有n个等级,在每个等级花费$ai$的代价有$pi$的几率升到$i+1$级,$1-pi$的概率降级降到$xi$(xi<=i),给出q次询问,每次询问从$l$级到$r$级的代价的期 ...

  9. HTML样式链接到外部样式表

    w3cschool链接:http://www.w3school.com.cn/html/html_css.asp <html> <head><link rel=" ...

  10. leetcode-5-最长回文子串*马拉车

    方法一:动态规划 O(n2) O(n2) class Solution: def longestPalindrome(self, s: str) -> str: size = len(s) if ...