基於SwiperJs的H5/移動端下拉刷新上拉加載更多
最先時，公司的H5項目中曾用過點擊一個「加載更多」的DOM元素來實現分頁的功能，後來又用過網上有人寫的一個上拉加載更多的插件，那個插件是頁面將要滾動到底部時就自動請求數據並插入到頁面的後邊，其實這樣也是能夠的，不過在咱們的負責人看了以前的效果後提出的要求是但願頁面滾動到底部時先暫時不加載更多的數據，而是當頁面滾動到底部且用戶還在往上拉動頁面時再加載更多。這樣的好處是，萬一用戶只是想滾動到底部只看看被屏幕遮擋住的其餘數據而沒有想要看更多的數據時，就不用再請求數據了。因而我就查資料找到了一個基於iscroll的插件實現的這種效果。具體的效果實現代碼請戳向這裏：基於zepto的H5/移動端tab切換觸摸拖動加載更多數據。javascript
注意
在這裏提醒一下你們，若是你實際開發的項目中出現了在也一個頁面中會有tab切換，在每一個切換的內容中又有上拉加載更多的需求，建議你能夠把每一個tab切換的效果作成單獨的頁面來模擬tab切換，這樣的好處是在一個頁面中就不會有各類各樣的判斷來知足上拉加載更多的效果在不一樣tab以前切換的需求，由於提示上拉加載更多的效果在一個頁面中的DOM節點只有一個，若是你判斷了第一個tab中沒有更多數據了，那就要把上拉加載更多給置換成沒有更多數據了，而在第二個tab中若是有不少的數據就又要把沒有更多數據的效果給置換成上拉加載更多。這還只是其中的一種狀況，還有一種狀況是頁面一加載完成就要判斷第一個tab中還有沒有更多的數據，若是沒有，就要把上拉加載更多給置換成沒有更多數據了，而在第二個tab中就如同以前的作法了，同時還有一種狀況是，因爲是在同一個頁面中用tab切換來查看其它的數據，那麼在上拉加載更多數據的時候就要判斷當前是在哪一個tab下，這裏其實簡單一點，只要知道當前tab的索引就行了。以下圖醬的：css
以上種種，只是提醒你們注意的一些比較麻煩的狀況罷了，在實際的操做中可能更爲複雜，本人就栽過這樣的大坑，因此建議你們能夠將tab拆分爲單個的頁面來模擬切換的效果，這樣雖然在程序上好比在瀏覽器返回上一級時可能會達不到一些要求，可是這個問題幾乎能夠忽略不計，從而在單個頁面中來作這些判斷就簡單的多了，大大下降了開發成本，切用戶體驗幾乎沒有什麼改變。html
好，言歸正傳，回到本篇博客內容的主題「基於SwiperJs的H5/移動端下拉刷新上拉加載更多」。以前只想着說swiper能夠用來作一些圖片輪播切換的效果，因此就用了iscroll插件，以爲也沒什麼不妥。因爲本人也熱愛學習，喜歡在網上查找各類的資料以及各類效果的實現，無心中就看到有人竟然用swiper寫了一個下拉刷新上拉加載更多的效果。瞬間以爲網絡上的大牛真是多如牛毛啊，哈哈... 也瞬間以爲本身的眼光太窄、眼界太淺，看問題只看表面，沒有過多的去研究一些插件的文檔和功能。因爲咱們的H5項目中圖片的輪播就是用的swiper，那麼再用swiper來實現上拉加載更多，那就不用使用過多的其餘插件了，能夠下降項目的體積，減小服務器的請求。下邊就奉獻上基於SwiperJs的H5/移動端下拉刷新上拉加載更多的實現代碼：java
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<style type="text/css">
html, body{height: 100%;font-family: "微軟雅黑";}
*{margin: 0;padding: 0;box-sizing: border-box;}
a {color: #428bca;text-decoration: none;}
a:hover,a:focus {color: #2a6496;text-decoration: underline;}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
.padd_40{padding-top: 80px;background: #F5F5F5;overflow-x:hidden;}
.a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
.tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
.tab a{width: 33.333333%;background: #fff;text-align: center;}
.tab .active{border-bottom: 1px #f50 solid; color: #f50;}
.panel{margin: 0;}
.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
.swiper-container{overflow: visible;}
.loadtip { display: block;width: 100%;line-height: 40px; height: 40px;text-align: center;color: #999;border-top: 1px solid #ddd;}
.swiper-container, .w{height: calc(100vh - 120px);}
.swiper-slide{height: auto;}
.text-center{text-align: center;}
.list-group{padding-left: 0;margin-bottom: 20px;}
.list-group-item{ position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
.list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}
</style>
</head>
<body class="padd_40">
<div class="a">標題</div>
<div class="tab">
<a class="active" href="javascript:;">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
</div>
<div class="swiper-container">
<div class="refreshtip">下拉能夠刷新</div>
<div class="swiper-wrapper w">
<div class="swiper-slide d">
<div class="init-loading list-group-item text-center" style="display: none;">下拉能夠刷新</div>
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
</div>
</div>
</div>
</div>
<div class="loadtip">上拉加載更多</div>
<div class="swiper-scrollbar"></div>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/swiper-3.2.5.min.js"></script>
<script type="text/javascript">
var loadFlag = true;
var oi = 0;
var mySwiper = new Swiper('.swiper-container',{
direction: 'vertical',
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchMove: function(swiper){ //手動滑動中觸發
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
if(mySwiper.translate < 50 && mySwiper.translate > 0) {
$(".init-loading").html('下拉刷新...').show();
}else if(mySwiper.translate > 50 ){
$(".init-loading").html('釋放刷新...').show();
}
},
onTouchEnd: function(swiper) {
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
// 上拉加載
if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
if(loadFlag){
$(".loadtip").html('正在加載...');
}else{
$(".loadtip").html('沒有更多啦！');
}
setTimeout(function() {
for(var i = 0; i <5; i++) {
oi++;
$(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加載出來的'+oi+'...</li>');
}
$(".loadtip").html('上拉加載更多...');
mySwiper.update(); // 從新計算高度;
}, 800);
}
// 下拉刷新
if(mySwiper.translate >= 50) {
$(".init-loading").html('正在刷新...').show();
$(".loadtip").html('上拉加載更多');
loadFlag = true;
setTimeout(function() {
$(".refreshtip").show();
$(".init-loading").html('刷新成功！');
setTimeout(function(){
$(".init-loading").html('').hide();
},800);
$(".loadtip").show();
//刷新操做
mySwiper.update(); // 從新計算高度;
}, 1000);
}else if(mySwiper.translate >= 0 && mySwiper.translate < 50){
$(".init-loading").html('').hide();
}
return false;
}
});
var mySwiper2 = new Swiper('.swiper-container2',{
onTransitionEnd: function(swiper){
$('.w').css('transform', 'translate3d(0px, 0px, 0px)');
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
}
});
$('.tab a').click(function(){
$(this).addClass('active').siblings('a').removeClass('active');
mySwiper2.slideTo($(this).index(), 500, false);
$('.w').css('transform', 'translate3d(0px, 0px, 0px)');
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
});
</script>
</body>
</html>
以上代碼中一些關於swiper的一些屬性和方法，其實在swiper的官網文檔中都是能夠找獲得的，我就不一一作介紹和註釋了。最後的效果圖以下：
web
這裏有必要說明下，因爲本demo只是想呈現swiper能夠實現下拉刷新和上拉加載更多，而沒有去判斷是否有更多的數據須要加載，因此沒有將tab給分割成多個單個頁面來實現。不過仍是要提醒你們，儘可能將tab拆分爲多個頁面來實現上拉加載更多。瀏覽器
這裏附上源代碼下載案例：
基於SwiperJs的H5/移動端下拉刷新上拉加載更多服務器
相關文章
- 1. H5基於iScroll實現下拉刷新，上拉加載更多
- 2. iscroll實現移動端下拉刷新，上拉加載更多
- 3. 下拉刷新，上拉加載更多
- 4. H5下拉刷新上拉加載更多
- 5. 基於Zepto移動端下拉加載（刷新），上拉加載插件開發
- 6. 上拉下拉刷新加載更多（適用pc端、移動端）
- 7. H5頁面基於iScroll.js插件實現下拉刷新，上拉加載更多
- 8. mui簡單的上拉加載更多 下拉刷新數據的簡單實現 移動端下拉上拉
- 9. 移動端上拉加載和下拉刷新的vue插件
- 10. vue2.0 移動端，下拉刷新，上拉加載更多 封裝組件
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
