jquery简单三步实现手机端下拉刷新列表

先看效果展示，还是蛮不错的

下拉刷新

1.添加样式文件以及js引用

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script> /*一个简单的模板 引擎*/

<style type="text/css">

/*动画样式*/

.loading {

margin: 20px auto 0;

width: 200px;

text-align: center;

}

.loading > div {

width: 10px;

height: 10px;

/* background-color: #67CF22;*/

background-color: #388bfb;

border-radius: 100%;

display: inline-block;

-webkit-animation: bouncedelay 1.4s infinite ease-in-out;

animation: bouncedelay 1.4s infinite ease-in-out;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.loading .bounce1 {

-webkit-animation-delay: -0.48s;

animation-delay: -0.48s;

}

.loading .bounce2 {

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.loading .bounce3 {

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

.loading .bounce4 {

-webkit-animation-delay: -0.08s;

animation-delay: -0.08s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% {

-webkit-transform: scale(0.0);

}

40% {

-webkit-transform: scale(1.0);

}

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

}

40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

}

</style>

2.具体js实现

<script type="text/javascript">

$(function () {

//数据源

var view = {

listkey: [

{ msg: 'bootstrap', addtime: '2015-06-01 12:25:25' },

{ msg: 'D3', addtime: '2015-06-01 12:25:25' },

{ msg: 'react', addtime: '2015-06-01 12:25:25' },

{ msg: 'angular.js', addtime: '2015-06-01 12:25:25' },

{ msg: 'abbb', addtime: '2015-06-01 12:25:25' },

{ msg: '1111adas1', addtime: '2015-06-01 12:25:25' },

{ msg: '我是测试', addtime: '2015-06-01 12:25:25' },

{ msg: '3333333333333', addtime: '2015-06-01 12:25:25' },

{ msg: '4444444444', addtime: '2015-06-01 12:25:25' },

{ msg: '我是测试', addtime: '2015-06-01 12:25:25' },

{ msg: '11111', addtime: '2015-06-01 12:25:25' },

{ msg: '22222', addtime: '2015-06-01 12:25:25' },

{ msg: '我是测试', addtime: '2015-06-01 12:25:25' },

{ msg: '4444444444', addtime: '2015-06-01 12:25:25' },

{ msg: '22222', addtime: '2015-06-01 12:25:25' },

{ msg: '我是测试', addtime: '2015-06-01 12:25:25' },

{ msg: '我是测试', addtime: '2015-06-01 12:25:25' },

{ msg: '5555555555555', addtime: '2015-06-01 12:25:25' },

],

};

var templatelist = "{{#listkey}} <li class=\"list-group-item\"> <span class=\"badge\">{{addtime}}</span>{{msg}}</li> {{/listkey}}";

//生成模板

var temp1 = Mustache.render(templatelist, view);

//添加视图

$("#show").html(temp1);

})

var templatelist = "";

function loading() {

debugger;

//数据源

var view = {

listkey: [

{ msg: 'bootstrap', addtime: '2015-06-01 12:25:25' },

{ msg: 'D3', addtime: '2015-06-01 12:25:25' },

{ msg: 'react', addtime: '2015-06-01 12:25:25' },

{ msg: 'angular.js', addtime: '2015-06-01 12:25:25' },

{ msg: 'abbb', addtime: '2015-06-01 12:25:25' },

{ msg: '1111adas1', addtime: '2015-06-01 12:25:25' },

{ msg: '我是测试', addtime: '2015-06-01 12:25:25' },

{ msg: '3333333333333', addtime: '2015-06-01 12:25:25' },

],

};

var templatelist = "{{#listkey}} <li class=\"list-group-item\"> <span class=\"badge\">{{addtime}}</span> {{msg}}</li> {{/listkey}}";

////生成模板

var temp1 = Mustache.render(templatelist, view);

//添加视图

$("#show").append(temp1);

}

$(document).ready(function () {

var backTop = $("#backToTop");

backTop.hide();

$(function () {

$(window).scroll(function () {

if ($(window).scrollTop() > 100) {

backTop.fadeIn(500);

}

else {

backTop.fadeOut(500);

}

})

backTop.click(function () {

$('body,html').animate({ scrollTop: 0 }, 500);

})

})

$(window).scroll(function () {

$(document).scrollTop(); //获取垂直滚动的距离

$(document).scrollLeft(); //这是获取水平滚动条的距离

if ($(document).scrollTop() >= $(document).height() - $(window).height()) {

debugger;

loading();

}

});

});

</script>

3.页面html代码

<div class="box">

<section class="paged">

<div class="page">

<ul class="list-group" id="show">

</ul>

</div>

</section>

<div class="loading" id="loadingdiv">

<div class="bounce1"></div>

<div class="bounce2"></div>

<div class="bounce3"></div>

<div class="bounce4"></div>

<div class="bounce5"></div>

</div>

<p style="text-align:center;color:#777777;font-size:12px;margin-top:1rem;">下拉刷刷新更多....</p>

<!--返回顶部-->

<p id="backToTop">

<img src="Images/stick_ic.png" style="height: 30px; width: 30px;float:right" alt="回顶部" />

<a href="#top"></a>

</p>

</div>