pullRefresh.js 是一款下拉刷新插件,开放一些钩子函数,能够在刷新的各类状态中作一些操做,包括刷新中的动画及dom操做,另外开放下拉框的实时下拉数据,能够彻底自定义本身的下拉组件,作出不一样下拉动画效果。html
pullRefresh.js 支持两种下拉模式,一种是总体下拉,一种是loading框下拉,以下
demo1 https://tls1234.github.io/pul...
demo2 https://tls1234.github.io/pul...git
<div class="container" style="margin-top:-60px;"> <div class="loadingContainer"> <div class="content"> <div class="arrowIcon"></div> <div class="loadingIcon" style="display:none"></div> <span class="text">下拉刷新</span> </div> </div> <ul class="list"> <li class="item1">item1</li> <li class="item2">item2</li> <li class="item3">item3</li> <li class="item4">item4</li> <li class="item5">item5</li> <li class="item6">item6</li> <li class="item7">item7</li> <li class="item8">item8</li> <li class="item9">item9</li> <li class="item10">item10</li> </ul> </div>
只须要new一个 PullRefresh()对象github
new PullRefresh( )
var flag1 = true; var flag2 = true; //这两个变量为了防抖,不要更改 var pullRefresh = new PullRefresh({ pullContainer: container, //父元素容器节点 loadingContent: loadingContainer, //刷新框节点 wholePullMode: true, //总体下拉模式,如上边demo1 loadingBoxPullMode: false, //刷新框下拉模式,如上边demo2 MaxLoadingHeight: 60, //下拉刷新的临界值和下拉框的高度一致 transition: '.3s ease', //回弹过渡效果 loadingBefore: function(hasScroll) { //小于刷新临界值时执行的函数,其中 hasScroll为下拉的距离,能够根据距离自定义动画效果 if(hasScroll < 60){ //小于刷新临界值时执行 if(flag1 == true){ //在这里执行dom操做 } flag1 = false; flag2 = true; } }, prepareLoading: function(hasScroll) { //大于刷新临界值时执行的函数 if(hasScroll > 60){ //大于刷新临界值时执行 if(flag2 == true){ //在这里执行dom操做 } flag2 = false; flag1 = true; } }, loading: function() { //刷新 //刷新时的dom操做 }, ajax: function() { //ajax请求及插入列表 }, loaded: function(hasScroll) { //加载完成的dom操做 } })
欢迎star https://github.com/tls1234/pu...ajax