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

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. Parse error: syntax error, unexpected 'class' (T_CLASS)

    电脑坏了重新下载代码. 结果报错 Parse error: syntax error, unexpected 'class' (T_CLASS), expecting identifier (T_ST ...

  2. 术语-BPM:BPM

    ylbtech-术语-BPM:BPM BPM,即业务流程管理,是一种以规范化的构造端到端的卓越业务流程为中心,以持续的提高组织业务绩效为目的的系统化方法,常见商业管理教育如EMBA.MBA等均将BPM ...

  3. liunx 定时任务crontab格式说明

    每分钟执行 */1 * * * * 每小时执行 0 * * * * 每天执行 0 0 * * * 每周执行 0 0 * * 0 每月执行 0 0 1 * * 每年执行 0 0 1 1 *

  4. MDX入门(2)

    MDX语言对大小写不敏感,而对于查询轴来说简单有Columns,Rows,Pages,Chapters,Sections分别也可以用AXIS(0),AXIS(1),AXIS(2),AXIS(3),AX ...

  5. QCOW2/RAW/qemu-img 概念浅析

    目录 目录 扩展阅读 RAW QCOW2 QEMU-COW 2 QCOW2 Header QCOW2 的 COW 特性 QCOW2 的快照 qemu-img 的基本使用 RAW 与 QCOW2 的区别 ...

  6. nvm-windows编译源码 go遇到的问题

    异常: Microsoft Windows [Version 10.0.17134.1006] (c) Microsoft Corporation. All rights reserved. C:\U ...

  7. 【HANA系列】SAP HANA启动出现ERROR

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA启动出现ERRO ...

  8. pycharm中的Terminal 中无法使用git的问题

    1.先找到git的安装路径,建议使用Everything工具 2.打开pycharm中的setting > tools > Terminal 3.把git的安装路径加上启动文件 bash. ...

  9. Java核心技术

    [Java核心技术36讲]1.谈谈你对Java平台的理解 2.Exception和Error有什么区别 3.谈谈final.finally.finalize有什么不同?4.强引用.软引用.弱引用.虚引 ...

  10. API网关spring cloud gateway和负载均衡框架ribbon实战

    通常我们如果有一个服务,会部署到多台服务器上,这些微服务如果都暴露给客户,是非常难以管理的,我们系统需要有一个唯一的出口,API网关是一个服务,是系统的唯一出口.API网关封装了系统内部的微服务,为客 ...