新公司比較喜歡用iScroll，而我對此一無所知，特此調研iScroll用法，寫在這里方便查看
IScroll是移動頁面上被使用的一款仿系統滾動插件。
myScroll = new IScroll("#wrapper",{
probeType: 3,
// momentum: false,//關閉慣性滑動
mouseWheel: true,//鼠標滑輪開啟
scrollbars: true,//滾動條可見
fadeScrollbars: true,//滾動條漸隱
interactiveScrollbars: true,//滾動條可拖動
shrinkScrollbars: 'scale', // 當滾動邊界之外的滾動條是由少量的收縮
useTransform: true,//CSS轉化
useTransition: true,//CSS過渡
bounce: true,//反彈
freeScroll: false,//只能在一個方向上滑動
startX: 0,
startY: 0,
// snap: "li",//以 li 為單位
});
myScroll.on('scroll',positionJudge);
myScroll.on("scrollEnd",action);
解釋：
-
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
是iScroll的初始化
-
myScroll.on('scroll',positionJudge);
myScroll.on("scrollEnd",action);
對開始拖動和拖動結束的監聽，這是iScroll5的一個坑，positionJudge和action都是function，但是如果直接以function(){}的方式寫在里面的話，調用會出問題，所以要單獨寫在外面
關於IScroll下拉刷新
//下拉刷新
var myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true, click: true });
myScroll.on("slideDown",function(){
var y = this.y
if(this.y > 140){
window.location.reload();//刷新當前頁面
}
});
IScroll最簡單的DOM結構:
- <div id="wrapper">
- <ul>
- <li>...</li>
- <li>...</li>
- ...
- </ul>
- </div>
初始化iscroll
- var myScroll = new IScroll('#wrapper',options);
初始化設置
初始化設置使用實例：
- var myScroll = new IScroll('#wrapper', {
- mouseWheel: true,
- scrollbars: true
- });
設置列表：（從API直接copy過來的）
| 所屬 |
屬性名 |
說明 |
默認值 |
| 核心庫 croe |
options.useTransform |
是否使用CSS3的Transform屬性 |
true |
| options.useTransition |
是否使用CSS3的Transition屬性，否則使用requestAnimationFram代替 |
true |
|
| options.HWCompositing |
是否啟用硬件加速 |
true |
|
| options.bounce |
是否啟用彈力動畫效果，關掉可以加速 |
true |
|
| 基礎特性 Basic features |
options.click |
是否啟用click事件。建議關閉此選項並啟用自定義的tap事件（options.tap） |
false |
| options.disableMouse |
是否關閉鼠標事件探測。如知道運行在哪個平台，可以開啟它來加速。 |
false |
|
| options.disablePointer |
是否關閉指針事件探測。如知道運行在哪個平台，可以開啟它來加速。 |
false |
|
| options.disableTouch |
是否關閉觸摸事件探測。如知道運行在哪個平台，可以開啟它來加速。 |
false |
|
| options.eventPassthrough |
使用IScroll的橫軸滾動時，如想使用系統立軸滾動並在橫軸上生效，請開啟。 |
false |
|
| options.freeScroll |
主要在上下左右滾動都生效時使用，可以向任意方向滾動。 |
false |
|
| options.keyBindings |
綁定按鍵事件。 |
false |
|
| options.invertWheelDirection |
反向鼠標滾輪。 |
false |
|
| options.momentum |
是否開啟動量動畫，關閉可以提升效率。 |
true |
|
| options.mouseWheel |
是否監聽鼠標滾輪事件。 |
false |
|
| options.preventDefault |
是否屏蔽默認事件。 |
true |
|
| options.scrollbars |
是否顯示默認滾動條 |
false |
|
| options.scrollX options.scrollY |
可以設置是否顯示橫向或縱向滾動條 |
scrollX false scrollY true |
|
| options.tap |
是否啟用自定義的tap事件 可以自定義tap事件名 |
false |
|
| 滾動條 Scrollbars |
options.scrollbars |
是否顯示默認滾動條 |
false |
| options.fadeScrollbars |
是否漸隱滾動條，關掉可以加速 |
true |
|
| options.interactiveScrollbars |
用戶是否可以拖動滾動條 |
false |
|
| options.resizeScrollbars |
是否固定滾動條大小，建議自定義滾動條時可開啟。 |
false |
|
| options.shrinkScrollbars |
滾動超出滾動邊界時，是否收縮滾動條。 ‘clip’：裁剪超出的滾動條 ‘scale’:按比例的收縮滾動條（占用CPU資源） false:不收縮， |
false |
|
|
|
options.indicators |
指示IScroll該如何滾動，Scrollbars的底層實現方式。 |
|
| options.indicators.el |
制定滾動條的容器。容器中的第一個元素即為指示器。 例如： indicators: { el: document.getElementById('indicator') } indicators: { el: '#indicator' } |
|
|
| options.indicators.ignoreBoundaries |
是否忽略容器邊界。設為true 可以設置滾動速度 |
false |
|
| options.indicators.listenX options.indicators.listenY |
指示器監聽那個方向的滾動，可以設置為一個方向或2個方向 |
true |
|
| options.indicators.speedRatioX options.indicators.speedRatioY |
指示器相對主滾動條的速度 |
0 |
|
| options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink |
如scrollbars的設置 |
|
|
| options.probeType |
需要使用iscroll-probe.js才能生效 probeType：1 滾動不繁忙的時候觸發 probeType：2 滾動時每隔一定時間觸發 probeType：3 每滾動一像素觸發一次 |
|
|
| 分割頁面snap |
options.snap |
自動分割容器，用於制作走馬燈效果等。 Options.snap:true//根據容器尺寸自動分割 Options.snap:el//根據元素分割 |
false |
| 縮放 zoom |
options.zoom |
是否打開縮放 最好使用iscroll-zoom.js 如放大模糊，可將源容器定義為2倍大小，然后scale(0.5) |
false |
| options.zoomMax |
最大縮放等級 |
4 |
|
| options.zoomMin |
最小縮放等級 |
1 |
|
| options.startZoom |
初始縮放等級 |
1 |
|
| options.wheelAction |
滾輪動作 設為’zoom’，可以用滾輪縮放 |
undefined |
|
| 更多設置 |
options.bindToWrapper |
光標、觸摸超出容器時，是否停止滾動 |
false |
| options.bounceEasing |
彈力動畫效果 預置效果：'quadratic', 'circular', 'back', 'bounce', 'elastic'（最后兩個不能通過css3表現） 還可以自定義效果 bounceEasing: { style: 'cubic-bezier(0,0,1,1)',//css3時 fn: function (k) { return k; }//不使用css3，使用requestAnimationFrame時 } |
'circular' |
|
| options.bounceTime |
彈力動畫持續的毫秒數 |
600 |
|
| options.deceleration |
滾動動量減速 越大越快，建議不大於0.01 |
0.0006 |
|
| options.mouseWheelSpeed |
鼠標滾輪速度 |
|
|
| options.preventDefaultException |
列出哪些元素不屏蔽默認事件； |
{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } |
|
| options.resizePolling |
重新調整窗口大小時，重新計算IScroll的時間間隔 |
60 |
|
| 鍵位綁定 |
options.keyBindings |
監聽按鍵事件控制IScroll 例如： keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 } |
|
|
|
IScroll5的API：
| 所屬 |
方法名 |
說明 |
| 滾動 |
scrollTo(x, y, time, easing) |
滾動到：x，y，事件，easing方式 x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic 見IScroll.utils.ease 對象 例： myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic); |
|
|
scrollBy(x, y, time, easing) |
滾動到相對於當前位置的某處 其余同上 |
|
|
scrollToElement(el, time, offsetX, offsetY, easing) |
滾動到某個元素。el為必須的參數 offsetX/offsetY：相對於el元素的位移。設為true即為屏幕中心 |
| 分割頁面snap |
goToPage(x, y, time, easing) |
根據options.snap分割頁面，跳轉到橫向、縱向某頁。XY可以同時生效。 結合options.snap使用 |
| next() prev() |
上一頁，下一頁 結合options.snap使用 |
|
| 縮放 |
zoom(scale, x, y, time) |
縮放容器 Scale:縮放因子 |
| 刷新 |
refresh() |
刷新IScroll |
| 銷毀 |
destroy() |
銷毀IScroll，節省資源 |
| |
應用實例：
hml結構：
<div id="wrapper">
<div id="scroller">
內容區域
</div>
</div>
CSS樣式：
#wrapper{
width:750px;
position:absolute;
z-index:1;
top:0px;
bottom:0px;
left:0;
overflow:hidden;
}
#scroller{
position:absolute;
z-index:1;
width:100%;
transform:translateZ(0);
user-select:none;
text-size-adjust:none
}
//這個是下拉時候 刷新的過渡效果
.loading{
width:750px;
text-align:center;
position:absolute;
top:-140px;
}
JS結構
$(function(){
var myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true, click: true });
myScroll.on("slideDown",function(){
var y = this.y ;
if(this.y > 140){
window.location.reload();//刷新當前頁面
}
});
myScroll.on("slideUp",function(){
if(this.maxScrollY - this.y > 40){
alert("向上刷新，請求接口數據") 這里進行ajax請求
}
});
})
當出現上下滑動的時候
