JS三教九流系列-iscroll.js-頁面下拉刷新上拉加載等效果實現
一.準備環節javascript
iscroll.js 5.x版本項目地址 https://github.com/cubiq/iscroll css
演示地址：http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html html
下載解壓，咱們打開demos目錄，把click複製，更名字爲app，也就是咱們處理的基礎，app文件目錄下的index.html改成app.html，都是爲了更好理解爲本身建立的應用java
咱們打開app.html，先預覽一下js文件，就是iscroll.js，看看就好，咱們不必去改，咱們返回html頁面，jquery
js部分作出修改以下：css3
<script type="text/javascript">
window.onload=function(){
var myScroll;
myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
};
</script>
html的body標籤調用的載入去掉，這樣看着才舒心：git
<body>
：：：：：最重要的一點，在引入類庫的目錄下咱們能夠看到不少iscroll.js的類庫文件，咱們選擇下面的，這是事最全的，能夠保證全部api被支持：github
咱們引入js部分代碼改爲以下：web
<script type="text/javascript" src="../../build/iscroll-probe.js"></script>
咱們須要找到針對iscroll的api，根據api提供的屬性和方法等去修改目標效果。ajax
二.接口使用和基本封裝
----1.思考
咱們要找到的是事件：
1.下拉事件接口
2.上拉事假接口
咱們找到後，
針對下拉作提示刷新圖標顯示
針對上拉，就去ajax請求調用，固然咱們只要模擬插入數據就行了。
針對5.x版本，咱們必定要找到對應的api，不一樣版本的api是不一樣的，咱們大體羅列iscroll5.x的全部api：
網上的一套總結：http://www.cnblogs.com/leolai/articles/4204345.html
官網雖好，英文水平不行：http://iscrolljs.com/
----2.事件：
myScroll.on('scrollStart', function(){console.log("拖拽開始")});
myScroll.on('scroll', function(){console.log("拖拽中")});
myScroll.on('scrollEnd', function(){console.log("拖拽結束")});
咱們修改代碼，加入事件測試：
<script type="text/javascript">
window.onload=function(){
var myScroll;
myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否監聽鼠標滾輪事件
bounceTime:600, //彈力動畫持續的毫秒數
probeType: 3
});
myScroll.on('scrollStart', function(){console.log("開始")});
myScroll.on('scroll', function(){console.log("拖拽中")});
myScroll.on('scrollEnd', function(){console.log("結束")});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//alert(myScroll.y)
};
</script>
測試的日誌顯示，表示咱們須要的事件被支持：
----3.屬性
myScroll.x //當前位置
myScroll.y
myScroll.maxScrollX //當滾動到底部時的 myScroll.x/y
myScroll.maxScrollY
myScroll.directionX //上一次的滾動方向(-1 下/右, 0 保持原狀, 1 上/左)
myScroll.directionY
myScroll.currentPage //當前Snap信息
咱們的處理都是下拉和上拉處理，毫無疑問在y軸的處理纔是咱們須要的，咱們須要的api屬性大概應該以下：
myScroll.y //當前位置y
myScroll.maxScrollY //當滾動到底部時的 y
咱們在 scroll 事件輸出這兩個信息測試，js代碼修改以下：
<script type="text/javascript">
window.onload=function(){
var myScroll;
myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否監聽鼠標滾輪事件
bounceTime:600, //彈力動畫持續的毫秒數
probeType: 3
});
myScroll.on('scrollStart', function(){console.log("開始")});
myScroll.on('scroll', function(){
console.log("拖拽中y:"+myScroll.y);
console.log("拖拽底部y:"+myScroll.maxScrollY);
});
myScroll.on('scrollEnd', function(){console.log("結束")});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
};
</script>
分析打印日誌，咱們得出myScroll.maxScrollY 是固定值；
myScroll.y是時時變化值；
咱們結合實際：
下拉就是myScroll.y大於0；
下拉就是myScroll.y小於myScroll.maxScrollY ；
----4.根據y值作出最基本封裝
根據上面的結果，咱們作了下面判斷處理，並日志打印，咱們寫個5的差值，就是爲了不一移動就觸發
<script type="text/javascript">
window.onload=function(){
var myScroll;
myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否監聽鼠標滾輪事件
bounceTime:600, //彈力動畫持續的毫秒數
probeType: 3
});
myScroll.on('scrollStart', function(){console.log("開始")});
myScroll.on('scroll', function(){
if (this.y > 5) {
//下拉刷新效果
console.log("下拉");
} else if (this.y < (this.maxScrollY - 5)) {
//上拉刷新效果
console.log("上拉");
};
});
myScroll.on('scrollEnd', function(){console.log("結束")});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
};
</script>
----5.二次封裝處理
咱們問題在哪裏？拿下拉舉例子，就是隻要下拉就打印日誌，這是不符合邏輯的，應該是
判斷出下拉或者上拉 事件
在下拉或者上拉結束打印日誌或者處理
咱們刪除開始事件，這個已經不用，
咱們建立表示上拉和下拉的變量，而後在結束時間根據標誌去作判斷處理，代碼修改以下：
<script type="text/javascript">
window.onload=function(){
var myScroll;
myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否監聽鼠標滾輪事件
bounceTime:600, //彈力動畫持續的毫秒數
probeType: 3
});
var handle=0;//初始爲0，無狀態；1表示下拉，2表示上拉
myScroll.on('scroll', function(){
if (this.y > 5) {
//下拉刷新效果 ，標識設置爲1
handle=1;
} else if (this.y < (this.maxScrollY - 5)) {
//上拉刷新效果 ，表示設置爲2
handle=2;
};
});
myScroll.on('scrollEnd', function(){
if(handle==1){
//下拉刷新處理
console.log("下拉");
myScroll.refresh();
handle=0;//重設爲0，改成無狀態
}else if(handle==2){
//上拉刷新處理
console.log("上拉");
handle=0;//重設爲0，改成無狀態
}else{handle=0;};
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
};
</script>
咱們谷歌瀏覽器，去測試，就發現是沒什麼問題的，下拉/上拉+結束纔會處理。
這樣會顯得結構比較亂，咱們會好把處理的程序代碼放在外面調用處理，咱們進一步修改優化以下：
<script type="text/javascript">
window.onload=function(){
var myScroll;
myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否監聽鼠標滾輪事件
bounceTime:600, //彈力動畫持續的毫秒數
probeType: 3
});
var handle=0;//初始爲0，無狀態；1表示下拉，2表示上拉
myScroll.on('scroll', function(){
if (this.y > 5) {//下拉刷新效果 ，標識設置爲1
handle=1;
} else if (this.y < (this.maxScrollY - 5)) {//上拉刷新效果 ，表示設置爲2
handle=2;
};
});
myScroll.on('scrollEnd', function(){
if(handle==1){//下拉刷新處理
downrefresh()
handle=0;//重設爲0，改成無狀態
}else if(handle==2){//上拉刷新處理
upajaxload()
handle=0;//重設爲0，改成無狀態
}else{handle=0;};
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
function downrefresh(){//刷新處理
console.log("下拉");
myScroll.refresh();
};
function upajaxload(){//加載處理
console.log("上拉");
};
};
</script>
對於結束時的判斷咱們只要放在這兩個函數裏面就行了，下拉刷新和上拉加載的處理代碼。
----6.三次封裝處理
下拉就沒必要多說，app裏面就是加載下面的數據，可是下拉的時候咱們會看到提示內容：
下拉過程當中，那個位置要顯示些什麼（提示啊），咱們如今就在這個部分加上處理，其實上拉要是也有的話，原理同樣。
咱們在頁面這個位置定位一個標籤，寫入要顯示的內容，開始透明度爲0，咱們在下拉時改變透明度去顯示
<script type="text/javascript">
window.onload=function(){
var requestf5=document.getElementById("requestf5");
var myScroll;
myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否監聽鼠標滾輪事件
bounceTime:600, //彈力動畫持續的毫秒數
probeType: 3
});
var handle=0;//初始爲0，無狀態；1表示下拉，2表示上拉
myScroll.on('scroll', function(){
if (this.y > 5) {//下拉刷新效果 ，標識設置爲1
handle=1;
if(this.y>20){
requestf5.style.opacity=1;
}else{
requestf5.style.opacity=0;
};
} else if (this.y < (this.maxScrollY - 5)) {//上拉刷新效果 ，表示設置爲2
handle=2;
};
});
myScroll.on('scrollEnd', function(){
if(handle==1){//下拉刷新處理
downrefresh()
handle=0;//重設爲0，改成無狀態
}else if(handle==2){//上拉刷新處理
upajaxload()
handle=0;//重設爲0，改成無狀態
}else{handle=0;};
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
function downrefresh(){//刷新處理
console.log("下拉");
myScroll.refresh();
};
function upajaxload(){//加載處理
console.log("上拉");
};
};
</script>
當時個人是很是粗糙的處理，這個提示根據你的設計能夠豐富起來。
基本的處理和封裝以及api的使用就結束了，還有不少參數的設置，能夠參考api。
三.很是簡單的模擬實例
刷新就這樣就能夠了，咱們給下拉加入請求處理，就是ajax載入數據，咱們修改頁面結構，第一頁內容默認顯示，咱們引入jq類庫，方便咱們ajax的模擬處理和節點插入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: click</title>
<script type="text/javascript" src="../../build/iscroll-probe.js"></script>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var requestf5=document.getElementById("requestf5");
var myScroll;
myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否監聽鼠標滾輪事件
bounceTime:600, //彈力動畫持續的毫秒數
probeType: 3
});
var handle=0;//初始爲0，無狀態；1表示下拉，2表示上拉
myScroll.on('scroll', function(){
if (this.y > 5) {//下拉刷新效果 ，標識設置爲1
handle=1;
if(this.y>20){
requestf5.style.opacity=1;
}else{
requestf5.style.opacity=0;
};
} else if (this.y < (this.maxScrollY - 5)) {//上拉刷新效果 ，表示設置爲2
handle=2;
};
});
myScroll.on('scrollEnd', function(){
if(handle==1){//下拉刷新處理
downrefresh()
handle=0;//重設爲0，改成無狀態
}else if(handle==2){//上拉刷新處理
upajaxload()
handle=0;//重設爲0，改成無狀態
}else{handle=0;};
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
function downrefresh(){//刷新處理
console.log("下拉");
page=1;
myScroll.refresh();
};
var page=1;
var limit=10;
var jsondata=[
{'aa':111,'bb':111111},
{'aa':222,'bb':111111},
{'aa':333,'bb':111111},
{'aa':444,'bb':111111},
{'aa':555,'bb':111111},
{'aa':666,'bb':111111},
{'aa':777,'bb':111111},
{'aa':888,'bb':111111},
{'aa':999,'bb':111111},
{'aa':123,'bb':111111},
{'aa':456,'bb':111111},
{'aa':789,'bb':111111},
{'aa':987,'bb':111111},
{'aa':654,'bb':111111},
{'aa':321,'bb':111111},
{'aa':556,'bb':111111},
{'aa':223,'bb':111111},
{'aa':112,'bb':111111},
{'aa':889,'bb':111111},
{'aa':778,'bb':111111},
{'aa':998,'bb':111111},
{'aa':447,'bb':111111},
{'aa':852,'bb':111111},
{'aa':741,'bb':111111},
{'aa':963,'bb':111111},
{'aa':369,'bb':111111},
{'aa':258,'bb':111111},
{'aa':147,'bb':111111},
{'aa':753,'bb':111111},
{'aa':159,'bb':111111},
{'aa':999999,'bb':999999999999},
{'aa':999,'bb':999999},
{'aa':9,'bb':999999999},
{'aa':99,'bb':999999999}
];
var isfirst=true;
function upajaxload(){//加載處理
if(isfirst){
isfirst=false;
setTimeout(function(){
page+=1;
for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
if(i<jsondata.length){
$(".demo").append('<div class="list"><p>'+jsondata[i].aa+'</p><p>'+jsondata[i].bb+'</p></div>');
};
};
myScroll.refresh();//刷新結構
isfirst=true;
},1000);
}
};
});
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
*{
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#requestf5{position:absolute; width:100px; height:20px; line-height:20px; text-align:center;
left:50%; margin-left:-50px; top:45px; z-index:2; opacity:0;}
.demo{ background:#FFF;}
.demo .list{ height:200px;}
</style>
</head>
<body>
<div id="header">iScroll</div>
<div id="requestf5">請求刷新</div>
<div id="wrapper">
<div id="scroller">
<div class="demo">
<div class="list">
<p>1</p>
<p>1111111</p>
</div>
<div class="list">
<p>2</p>
<p>222222</p>
</div>
<div class="list">
<p>1</p>
<p>333333</p>
</div>
<div class="list">
<p>1</p>
<p>444444444</p>
</div>
<div class="list">
<p>1</p>
<p>5555555555</p>
</div>
<div class="list">
<p>1</p>
<p>666666666666</p>
</div>
<div class="list">
<p>1</p>
<p>777777777</p>
</div>
<div class="list">
<p>1</p>
<p>888888888</p>
</div>
<div class="list">
<p>1</p>
<p>9998999</p>
</div>
<div class="list">
<p>1</p>
<p>9999999999999999</p>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
很是粗糙的基本結構就出來了！下拉顯示刷新操做，其實應該清空從新載入，我沒有去模擬
一樣顯示的刷新提示還能夠作很是細緻的修飾，咱們是能夠獲取上一步的y值得，與當前值比較，咱們在回彈的時候還能夠二次修飾變化
上拉提示同下拉添加
一樣在顯示加載數據的時候咱們能夠利用css3的處理顯示
四.很是簡單的模擬實例下載
相關文章
- 1. 基於iscroll.js實現下拉刷新和上拉加載特效
- 2. H5頁面基於iScroll.js插件實現下拉刷新，上拉加載更多
- 3. zepto.js + iscroll.js上拉加載 下拉加載的 移動端 新聞列表頁面
- 4. Vue項目--用iscroll.js+pullToRefresh.js實現上拉加載更多、下拉刷新
- 5. jsp手機端網頁實現下拉刷新，上拉加載
- 6. mui 多個tab頁實現下拉刷新上拉加載
- 7. 移動端 上拉刷新，下拉加載 效果
- 8. weex實現list列表上拉加載&下拉刷新
- 9. BGARefreshLayout-Android實現多種下拉刷新效果、上拉加載更多
- 10. Fragment+側拉頁面加載，下拉刷新，上拉加載更多 代碼塊
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 基於iscroll.js實現下拉刷新和上拉加載特效
- 2. H5頁面基於iScroll.js插件實現下拉刷新，上拉加載更多
- 3. zepto.js + iscroll.js上拉加載 下拉加載的 移動端 新聞列表頁面
- 4. Vue項目--用iscroll.js+pullToRefresh.js實現上拉加載更多、下拉刷新
- 5. jsp手機端網頁實現下拉刷新，上拉加載
- 6. mui 多個tab頁實現下拉刷新上拉加載
- 7. 移動端 上拉刷新，下拉加載 效果
- 8. weex實現list列表上拉加載&下拉刷新
- 9. BGARefreshLayout-Android實現多種下拉刷新效果、上拉加載更多
- 10. Fragment+側拉頁面加載，下拉刷新，上拉加載更多 代碼塊