上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。

html

    <body>

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <div class='ball-pulse'>加载更多</div>

    </body>

加入了css3动画loading效果；

css

        <style type="text/css">

            /*loading效果*/

            @-webkit-keyframes scale {

                0% {-webkit-transform: scale(1);transform: scale(1);opacity:; }

                45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }

                80% {-webkit-transform: scale(1);transform: scale(1);opacity:; }

            }

            @keyframes scale {

                0% {-webkit-transform: scale(1);transform: scale(1);opacity:; }

                45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }

                80% {-webkit-transform: scale(1);transform: scale(1);opacity:; }

            }

            .ball-pulse > div:nth-child(1) {

                -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);

                animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }

            .ball-pulse > div:nth-child(2) {

                -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);

                animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }

            .ball-pulse > div:nth-child(3) {

                -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);

                animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }

            .ball-pulse > div {

                background-color: #aaa;

                width: 7px;

                height: 7px;

                border-radius: 100%;

                margin: 2px;

                display: inline-block; }

            .ball-pulse{text-align: center;color:#aaa;background:#EDF4F4; font-size:16px;height:1.5rem;line-height: 1rem;}

            body,html,ul,li{padding:;margin:;}

            ul li{height:4.5rem;background:#ccc;border-bottom:2px solid #aaa;

                list-style: none;}

        </style>

js部分：

     <script type="text/javascript" src="jquery-2.1.0.js"></script>

     <script type="text/javascript">

         $(function() {

             /****************** 滚动上拉下拉加载 ***************/

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

                 var scrollTop = $(this).scrollTop();

                 var scrollHeight = $(document).height();

                 var windowHeight = $(window).height();

                 if($(".ul li").length == 10) {

                     $(".ball-pulse").html("已经到底了！")

                 } else {

                     if(scrollTop + windowHeight == scrollHeight) {

                         //console.log("我到底部了");

                         setTimeout(getmore, 600)

                         function getmore() {

                             $(".ball-pulse").html("<div></div><div></div><div></div>")

                             setTimeout(function() {

                                 $(".ball-pulse").html("加载更多")

                                 $("ul").append("<li></li><li></li><li></li>")　　　　　　　　　　　　　　　　

                             }, 1000)　　　　　　　　　　　　　　

                         }　　　　　　　　　　　　

                     }　　　　　　　　　　

                 }　　　　　　

             });　　　　

         })　　

     </script>

当然我们也可以在加载的时候做下js判断，如果数据加载完毕，loading显示“已经到底了！”，这就看我们自己的发挥了，这个demo更适用于移动端页面使用，希望能帮助大家。

免插件，简单实现上拉加载loading的更多相关文章

  1. mescroll.js简单的上拉加载、下拉刷新插件，带完整注释

    声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...

  2. uniapp最简单的上拉加载更多demo

    data() { return { list:[],//数据列表 page: 1,//页数 } }, //请求一下数据(进入页面请求一次) onLoad() { this.getnewsList(th ...

  3. Android 上拉加载更多功能

    前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...

  4. 手把手教你实现Android RecyclerView上拉加载功能

    摘要 一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加载功能而去引入一大堆你不知道有多少BUG的代码, ...

  5. 移动端h5列表页上拉加载更多

    背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...

  6. Android中自定义ListView实现上拉加载更多和下拉刷新

    ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...

  7. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  8. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  9. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

随机推荐

  1. org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。

    错误记录 Spring Boot推荐使用thymeleaf作为视图,按照SpringBoot实战一书的案例写Demo. 发生错误: org.xml.sax.SAXParseException: 元素类 ...

  2. Fabric基础架构原理（一）

    Linux基金会于2015年12月启动了名为“超级账本”(Hyperledger)的开源项目,旨在推动各方协作,共同打造基于区块链的企业级分布式账本底层技术,用于构建支撑业务的行业应用和平台. 超级账 ...

  3. react 配置ant时遇见的一个Error: Multiple configuration files found. Please remove one: – package.json#babel – .babelrc 解决方案

    这个问题是create react app 里面的package.json里面已经配置了   "babel": {     "presets": [       ...

  4. JS - 创建只读属性

    一:为私有变量创建get()方法 这种方式可以创建 "伪 "只读属性.这并不是一种好方法,因为使用_函数_获得只读的_属性_不太符合一般的逻辑. /** * Represent a ...

  5. Docker - 部署 Ant Design Pro 的项目

    解读 Ant Design Pro 的 Docker 配置 package.json 的 scripts -f: 使用什么配置文件 -t: 标签 up: 启动服务(的容器) build: 构建或重新构 ...

  6. debian sftp/ssh

    检查是否安装poenssh dpkg --get-selections | grep openssh 如下表示已经安装

  7. python修改文件

    文档username.txt 将文件中密码123456改成67890: 方法一:(简单粗暴) 1.打开文件 2.读出数据 3.修改数据 4.清空原来文件,将新的内容写进去 f = open('user ...

  8. 在centos7.4 nginx mysql php部署 thinkphp5.0 项目

    系统 centos7  环境 php 7.1.3 nignx 1.12.2 mysql 5.5.6 我是通过lnmp 集成环境安装 fastcgi.conf 末尾添加 vim fastcig.conf ...

  9. [Git] 013 远程仓库篇 第零话 使用前的一些配置

    0. 前言 本地仓库和 GitHub 上的远程仓库之间的传输是通过 "SSH" 加密的,所以使用前需要进行一些设置 这回的任务 设置"身份象征" 创建 &quo ...

  10. Netty解码的艺术

    什么是拆包/粘包: TCP 粘包/拆包: TCP 是一个“流”协议,所谓流,就是没有界限的一长串二进制数据.TCP 作为传输层协议并不了解上层业务数据的具体含义,它会根据TCP 缓冲区的实际情况进行数 ...