免插件，简单实现上拉加载loading
上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。
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的更多相关文章
- mescroll.js简单的上拉加载、下拉刷新插件，带完整注释
声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...
- uniapp最简单的上拉加载更多demo
data() { return { list:[],//数据列表 page: 1,//页数 } }, //请求一下数据(进入页面请求一次) onLoad() { this.getnewsList(th ...
- Android 上拉加载更多功能
前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...
- 手把手教你实现Android RecyclerView上拉加载功能
摘要 一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加载功能而去引入一大堆你不知道有多少BUG的代码, ...
- 移动端h5列表页上拉加载更多
背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...
- Android中自定义ListView实现上拉加载更多和下拉刷新
ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 【Web】移动端下拉刷新、上拉加载更多插件
移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...
随机推荐
- 使用java语言实现一个队列（两种实现比较）（数据结构）
一.什么是队列,换句话说,队列主要特征是什么? 四个字:先进先出 六个字:屁股进,脑袋出 脑补个场景:日常排队买饭,新来的排在后面,前面打完饭的走人,这就是队列: OK,思考一个问题,我为什么写了两种 ...
- php中钩子(hook)的应用示例demo
我们先来回顾下原本的开发流程:产品汪搞出了一堆需求:当用户注册成功后需要发送短信.发送邮件等等:然后聪明机智勇敢的程序猿们就一扑而上:把这些需求转换成代码扔在 用户注册成功 和 跳转到首页 之间: 没 ...
- Wowza 4 vod 录播多层目录无法播放问题
找到一个解决方案,但是无法下载zip包 https://stackoverflow.com/questions/21303361/how-to-stream-mp4-files-from-subdir ...
- 解决 ffmpeg 在avformat_find_stream_info执行时间太长
用ffmpeg做demux,网上很多参考文章.对于网络流,avformt_find_stream_info()函数默认需要花费较长的时间进行流格式探测,那么,如何减少探测时间内? 可以通过设置AVFo ...
- 认识了一个新的手机游戏剖析工具- SnapDragon Profiler
原来这个是高通的工具,具说UNITY官方推荐了这个工具.大概看了下,可以从宏观上实时剖析手机应用的方方面面
- TreeSet 源码分析
TreeSet 1)底层由 TreeMap 支持的 Set 接口实现,Set 中的元素按照自然顺序或指定的比较器排序. 创建实例 /** * 支持此 Set 的底层的 TreeMap 对象 */ pr ...
- 手把手教您在 Windows Server 2019 上使用 Docker
配置 Windows 功能 要运行容器,您还需要启用容器功能 Install-WindowsFeature -Name Containers 在 Window Server 2019 上安装 Dock ...
- 佳能mp288拆解步骤--绝对原创
http://itbbs.pconline.com.cn/office/50663206.html 佳能mp288拆解步骤--绝对原创 gotobug Lv1太平洋舰队新兵 楼主 2013-10-13 ...
- Maven系列学习(三)Maven生命周期和插件
Maven生命周期和插件 Maven另外的两个核心概念就是生命周期和插件,Maven的生命周期都是抽象的,其实实际行为都是由插件来完成的,生命周期和插件两者协同工作 1.生命周期 Maven的生命周期 ...
- quartz任务调度的详解
1.Quartz包含3个核心(调度器.作业类.触发器) (1).作业类:只需要实现org.quartz.job接口,同时包含里面的一个方法体execute()[这是被调度的作业体] (2).调度器:是 ...