上拉下拉刷新加載更多（適用pc端、移動端）
能夠參考資料：（https://www.jianshu.com/p/65c718093d44）javascript
thinkphp3.2作法:php
控制器：css
public function pk_list(){
$this->checkLogin();
if(IS_POST){
$pages = I('post.pages');
$pages = (int)$pages;
if(empty($pages)){
$pages = 0;
}
$limit = 10;
$limits = $pages.",".$limit;
$openid = session('authopenid');
$footballLog = M('FootballLog');
$football = M('Football');
$loglist = $footballLog->where(true)->limit($limits)->select();
$openids[] = $openid;
foreach($loglist as $k=>$v){
$openids[] = $v['pkopenid'];
}
$footballMap['openid'] = array('in', $openids);
$footballList = $football->field('team_name,openid')->where($footballMap)->select();
foreach($footballList as $k1=>$v1){
$newArr[$v1['openid']] = $v1['team_name'];
}
$returnD['loglist'] = $loglist;
$returnD['newArr'] = $newArr;
$returnD['pages'] = $pages;
$this->ajaxReturn($returnD);
}else{
$this->display();
}
}
視圖層：html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>pk記錄</title>
<link type="text/css" media="all" rel="stylesheet" href="__STATIC__/dropload/dropload.css">
</head>
<body>
<article class="dr">
<section class="nr" style="display:block">
</section>
</article>
<a href="{:U('Football/center')}">返回我的中心</a>
<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
<script src="__STATIC__/dropload/dropload.js"></script>
<script type="text/javascript">
$(function () {
var pages = 0;
var dropload = $('.dr').dropload({
scrollArea: window,
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">上拉加載更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
domNoData: '<div class="dropload-noData">已無數據</div>'
},
loadDownFn: function(me) {
$.ajax({
type: 'POST',
url: "{:U('Football/pk_list')}",
data: {
pages:pages
},
success: function(data){
var result = '';
pages = data.pages + 10;
// $.ajax()雖然接口提供json字符串，但接收到的是 json對象,循環拼接顯示內容 DOM,刷新獲取多少數據，顯示多少 使用html()重置 lists DOM
for(var i = 0; i < data.loglist.length; i++){
result
+= '<div><span>'+data.loglist[i].pkopenid+'</span><span>|||'+data.loglist[i].pkresult+'</span></div>';
}
if(data.loglist.length < 10){
me.lock();
// 顯示無數據
me.noData();
}
// 爲了測試，延遲1秒加載
setTimeout(function(){
// 插入加載使用 html() 重置 DOM
$('.nr').append(result);
// 每次數據加載完，必須重置
me.resetload();
},1000);
},
// 加載出錯
error: function(xhr, type){
alert('Ajax error!');
// 即便加載出錯，也得重置
me.resetload();
}
});
}
});
});
</script>
</body>
</html>
引入dropload.js java
/**
* dropload
* 西門(http://ons.me/526.html)
* 0.9.0(160215)
*/
;(function($){
'use strict';
var win = window;
var doc = document;
var $win = $(win);
var $doc = $(doc);
$.fn.dropload = function(options){
return new MyDropLoad(this, options);
};
var MyDropLoad = function(element, options){
var me = this;
me.$element = element;
// 上方是否插入DOM
me.upInsertDOM = false;
// loading狀態
me.loading = false;
// 是否鎖定
me.isLockUp = false;
me.isLockDown = false;
// 是否有數據
me.isData = true;
me._scrollTop = 0;
me._threshold = 0;
me.init(options);
};
// 初始化
MyDropLoad.prototype.init = function(options){
var me = this;
me.opts = $.extend(true, {}, {
scrollArea : me.$element, // 滑動區域
domUp : { // 上方DOM
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑釋放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>'
},
domDown : { // 下方DOM
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加載更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
domNoData : '<div class="dropload-noData">暫無數據</div>'
},
autoLoad : true, // 自動加載
distance : 50, // 拉動距離
threshold : '', // 提早加載距離
loadUpFn : '', // 上方function
loadDownFn : '' // 下方function
}, options);
// 若是加載下方，事先在下方插入DOM
if(me.opts.loadDownFn != ''){
me.$element.append('<div class="'+me.opts.domDown.domClass+'">'+me.opts.domDown.domRefresh+'</div>');
me.$domDown = $('.'+me.opts.domDown.domClass);
}
// 計算提早加載距離
if(!!me.$domDown && me.opts.threshold === ''){
// 默認滑到加載區2/3處時加載
me._threshold = Math.floor(me.$domDown.height()*1/3);
}else{
me._threshold = me.opts.threshold;
}
// 判斷滾動區域
if(me.opts.scrollArea == win){
me.$scrollArea = $win;
// 獲取文檔高度
me._scrollContentHeight = $doc.height();
// 獲取win顯示區高度 —— 這裏有坑
me._scrollWindowHeight = doc.documentElement.clientHeight;
}else{
me.$scrollArea = me.opts.scrollArea;
me._scrollContentHeight = me.$element[0].scrollHeight;
me._scrollWindowHeight = me.$element.height();
}
fnAutoLoad(me);
// 窗口調整
$win.on('resize',function(){
if(me.opts.scrollArea == win){
// 從新獲取win顯示區高度
me._scrollWindowHeight = win.innerHeight;
}else{
me._scrollWindowHeight = me.$element.height();
}
});
// 綁定觸摸
me.$element.on('touchstart',function(e){
if(!me.loading){
fnTouches(e);
fnTouchstart(e, me);
}
});
me.$element.on('touchmove',function(e){
if(!me.loading){
fnTouches(e, me);
fnTouchmove(e, me);
}
});
me.$element.on('touchend',function(){
if(!me.loading){
fnTouchend(me);
}
});
// 加載下方
me.$scrollArea.on('scroll',function(){
me._scrollTop = me.$scrollArea.scrollTop();
// 滾動頁面觸發加載數據
if(me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){
loadDown(me);
}
});
};
// touches
function fnTouches(e){
if(!e.touches){
e.touches = e.originalEvent.touches;
}
}
// touchstart
function fnTouchstart(e, me){
me._startY = e.touches[0].pageY;
// 記住觸摸時的scrolltop值
me.touchScrollTop = me.$scrollArea.scrollTop();
}
// touchmove
function fnTouchmove(e, me){
me._curY = e.touches[0].pageY;
me._moveY = me._curY - me._startY;
if(me._moveY > 0){
me.direction = 'down';
}else if(me._moveY < 0){
me.direction = 'up';
}
var _absMoveY = Math.abs(me._moveY);
// 加載上方
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
e.preventDefault();
me.$domUp = $('.'+me.opts.domUp.domClass);
// 若是加載區沒有DOM
if(!me.upInsertDOM){
me.$element.prepend('<div class="'+me.opts.domUp.domClass+'"></div>');
me.upInsertDOM = true;
}
fnTransition(me.$domUp,0);
// 下拉
if(_absMoveY <= me.opts.distance){
me._offsetY = _absMoveY;
// todo：move時會不斷清空、增長dom，有可能影響性能，下同
me.$domUp.html(me.opts.domUp.domRefresh);
// 指定距離 < 下拉距離 < 指定距離*2
}else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5;
me.$domUp.html(me.opts.domUp.domUpdate);
// 下拉距離 > 指定距離*2
}else{
me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2;
}
me.$domUp.css({'height': me._offsetY});
}
}
// touchend
function fnTouchend(me){
var _absMoveY = Math.abs(me._moveY);
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
fnTransition(me.$domUp,300);
if(_absMoveY > me.opts.distance){
me.$domUp.css({'height':me.$domUp.children().height()});
me.$domUp.html(me.opts.domUp.domLoad);
me.loading = true;
me.opts.loadUpFn(me);
}else{
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
me.upInsertDOM = false;
$(this).remove();
});
}
me._moveY = 0;
}
}
// 若是文檔高度不大於窗口高度，數據較少，自動加載下方數據
function fnAutoLoad(me){
if(me.opts.autoLoad){
if((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight){
loadDown(me);
}
}
}
// 從新獲取文檔高度
function fnRecoverContentHeight(me){
if(me.opts.scrollArea == win){
me._scrollContentHeight = $doc.height();
}else{
me._scrollContentHeight = me.$element[0].scrollHeight;
}
}
// 加載下方
function loadDown(me){
me.direction = 'up';
me.$domDown.html(me.opts.domDown.domLoad);
me.loading = true;
me.opts.loadDownFn(me);
}
// 鎖定
MyDropLoad.prototype.lock = function(direction){
var me = this;
// 若是不指定方向
if(direction === undefined){
// 若是操做方向向上
if(me.direction == 'up'){
me.isLockDown = true;
// 若是操做方向向下
}else if(me.direction == 'down'){
me.isLockUp = true;
}else{
me.isLockUp = true;
me.isLockDown = true;
}
// 若是指定鎖上方
}else if(direction == 'up'){
me.isLockUp = true;
// 若是指定鎖下方
}else if(direction == 'down'){
me.isLockDown = true;
// 爲了解決DEMO5中tab效果bug，由於滑動到下面，再滑上去點tab，direction=down，因此有bug
me.direction = 'up';
}
};
// 解鎖
MyDropLoad.prototype.unlock = function(){
var me = this;
// 簡單粗暴解鎖
me.isLockUp = false;
me.isLockDown = false;
// 爲了解決DEMO5中tab效果bug，由於滑動到下面，再滑上去點tab，direction=down，因此有bug
me.direction = 'up';
};
// 無數據
MyDropLoad.prototype.noData = function(flag){
var me = this;
if(flag === undefined || flag == true){
me.isData = false;
}else if(flag == false){
me.isData = true;
}
};
// 重置
MyDropLoad.prototype.resetload = function(){
var me = this;
if(me.direction == 'down' && me.upInsertDOM){
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
me.loading = false;
me.upInsertDOM = false;
$(this).remove();
fnRecoverContentHeight(me);
});
}else if(me.direction == 'up'){
me.loading = false;
// 若是有數據
if(me.isData){
// 加載區修改樣式
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
fnAutoLoad(me);
}else{
// 若是沒數據
me.$domDown.html(me.opts.domDown.domNoData);
}
}
};
// css過渡
function fnTransition(dom,num){
dom.css({
'-webkit-transition':'all '+num+'ms',
'transition':'all '+num+'ms'
});
}
})(window.Zepto || window.jQuery);
引入dropload.cssjquery
.dropload-up,.dropload-down{
position: relative;
height: 0;
overflow: hidden;
font-size: 12px;
/* 開啓硬件加速 */
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
.dropload-down{
height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
height: 50px;
line-height: 50px;
text-align: center;
}
.dropload-load .loading{
display: inline-block;
height: 15px;
width: 15px;
border-radius: 100%;
margin: 6px;
border: 2px solid #666;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: rotate 0.75s linear infinite;
animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
完畢！！！web
相關文章
- 1. iscroll實現移動端下拉刷新，上拉加載更多
- 2. 下拉刷新，上拉加載更多
- 3. 基於SwiperJs的H5/移動端下拉刷新上拉加載更多
- 4. vue2.0 移動端，下拉刷新，上拉加載更多 封裝組件
- 5. vue移動端下拉刷新、上拉加載
- 6. 移動端下拉刷新和上拉加載實現
- 7. 移動端上拉加載下拉刷新插件-mescroll.js插件
- 8. 移動端 上拉刷新，下拉加載 效果
- 9. 移動端上拉加載和下拉刷新的vue插件
- 10. 移動端下拉刷新、上拉加載之vueScroll
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
