移動前端滑動插件——JRoll-創(chuàng)新互聯(lián)

        不知道是百度搜索的算法更新了還是什么原因，在百度上搜 jroll，搜索結(jié)果首頁看不到 JRoll 的官網(wǎng)

成都創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元隰縣做網(wǎng)站,已為上家服務(wù),為隰縣各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

        也有可能是因?yàn)槲揖芙^了購買百度關(guān)鍵詞推廣，并且把百度聯(lián)盟的廣告都撤下了，什么原因不管了，

        這里提供一下官網(wǎng)地址：http://www.chjtx.com/JRoll/

—— 2018年12月05日更新

------------------------------------------- 我是分隔線，以下是原文 ----------------------------------------

        又過了一年，終于，第三篇博文要出爐了。

去年9月底，結(jié)束創(chuàng)業(yè)生涯后，我進(jìn)入了一家外包公司從事移動前端工作，洽洽這年html5火到要爆，而具備html5技能的工程師卻千里難覓，雖然我一直從事PC端的工作，但憑借扎實(shí)的js基礎(chǔ)，也謀了個中級工程師的職位。多學(xué)點(diǎn)東西準(zhǔn)沒錯的。

從事正規(guī)的前端工作后，我接觸到了underscore、ratchet、backbone、requirejs、seajs、cordova、angular等等一大堆前端框架工具，不禁感慨，原來我以前的圈子是那么的渺小。iscroll，相信大多數(shù)移動前端開發(fā)者都用過，在我創(chuàng)業(yè)那段時間也接觸過，由于當(dāng)時不會用，擱置了。

進(jìn)入公司后，iscroll便成了不可離開的工具。html5移動應(yīng)用為了滿足業(yè)務(wù)需求，滑動操作也復(fù)雜起來，不再像純手機(jī)網(wǎng)站那樣一頁下來。而div的overflow:auto屬性，在移動設(shè)備的表現(xiàn)不太理想，為了解決滑動呆板問題，iscroll似乎成了救星。然而，iscroll并不是萬能的，當(dāng)滑動的元素多起來時，卡頓、閃屏更為嚴(yán)重。為了控制頁面元素數(shù)量，只好采用增減法，即一次只顯示三頁，顯示第四頁時，將第一頁刪除，始終在屏幕上保持三頁的數(shù)量，并將位移減去第一頁的高度，以保持第二、三頁相對屏幕的位置不變。這樣一來，iscroll性能方面的缺陷得到了一個比較有效的解決方案。同時，運(yùn)用空間換性能的方法，將加載過的頁面緩存下來，客戶體驗(yàn)也是扛扛的。但是，iscroll這就滿足了我的需求？如果真是這樣的話，就不會有這篇博文了。

為了尋找一個更好的滑動插件，去年12月開始研究IScroll5，今年3月開始著手起草JRoll。我設(shè)計jroll的初衷是為解決iscroll的不足，如此一來，我必須先找出iscroll都有哪些缺陷。

以下是我感覺iscroll需要改進(jìn)的地方：

1、性能方面，300條數(shù)據(jù)就會出現(xiàn)卡頓

2、scrollFree參數(shù)失效。scrollFree為false時，當(dāng)左右滑動過程中不能進(jìn)行上下滑動，上下滑動過程中不允許左右滑動。IScroll5出現(xiàn)的bug是當(dāng)一開始就斜向滑動的話，scrollFree鎖定就會失效。

3、文件太多，iscroll、iscroll-infinite、iscroll-lite、iscroll-probe、iscroll-zoom共五個文件。iscroll是普通版，含滾動條。iscroll-infinite是無限循環(huán)版。iscroll-lite是精簡版，無滾動條。iscroll-probe是加強(qiáng)版，可監(jiān)聽滑動并添加滑動事件。iscroll-zoom是縮放版。而且這幾個文件是不能同時使用的，否則會發(fā)生沖突。

4、文件太大，iscroll為了兼容pc，做了很多兼容處理，而且IScroll5里面有很多已經(jīng)被棄用的代碼并沒有刪除。

5、滑動表單時光標(biāo)丟失

好，既然問題已經(jīng)找出來了，那么該如果解決？即便不能解決所有，也應(yīng)該做到更好。

一、突破性能瓶頸

在研究iscroll源碼的過程中，發(fā)現(xiàn)造成卡頓的主要原因是使用了css3的transition-duration實(shí)現(xiàn)慣性滑動。眾所周之，css3動畫對設(shè)備性能要求比較高，在大面積使用時，對GPU來說更是一項(xiàng)極艱巨的挑戰(zhàn)。iscroll做得比較好的是，對于不支持transition-duration的手機(jī)使用requestAnimationFrame來補(bǔ)救。目前安卓4.1以上都支持transition-duration，但4.1~4.3性能表現(xiàn)不佳。4.2以上支持requestAnimationFrame，對于不支持requestAnimationFrame的手機(jī)可以用setTimeout代替。安卓4.2、4.3雖然支持requestAnimationFrame，但其它性能表現(xiàn)與setTimeout無異。值得高興的是，現(xiàn)在國內(nèi)所有手機(jī)廠商基本上不再生產(chǎn)安卓4.4以下的手機(jī)。按現(xiàn)在的手機(jī)更替速度來看，一兩年后，html5開發(fā)者再也不用為兼容安卓低端機(jī)而頭疼。

經(jīng)過測試，使用requestAnimationFrame實(shí)現(xiàn)慣性滑動，能滑起上萬條數(shù)據(jù)，雖然在安卓4.4以下效果會打點(diǎn)折扣，但數(shù)據(jù)多的時候比起transition-duration強(qiáng)多了，在IOS上表現(xiàn)溜溜的。還是蘋果牛逼。

權(quán)衡取舍，JRoll最終采用requestAnimationFrame來實(shí)現(xiàn)慣性滑動。為了降低開發(fā)成本及個人精力有限等問題，JRoll只支持webkit和blink內(nèi)核的瀏覽器。至于其它內(nèi)核的瀏覽器，一來沒時間調(diào)試，二來窮屌絲沒錢買設(shè)備(T_T)。

滑動頁面的實(shí)現(xiàn)原理是在touchmove時移動元素的位置，那到底用absolute好還是用translate好？網(wǎng)上也有不少文章對這兩個實(shí)現(xiàn)方法的討論，當(dāng)然結(jié)論也會因系統(tǒng)環(huán)境、瀏覽器內(nèi)核等因素而異。使用absolute移動位置，可以解決表單丟失光標(biāo)的問題，但滑動流暢度總是那么的不盡人意。當(dāng)然在安卓4.1以下系統(tǒng)表現(xiàn)會比translate好些，那些將要被淘汰的系統(tǒng)，我們就不必深究了。使用translate可以開啟3D加速，流暢度有了質(zhì)的提升，只是在軟鍵盤彈出后滑動頁面時，某些系統(tǒng)如ios，某些安卓瀏覽器會出現(xiàn)光標(biāo)不跟隨input輸入框的問題，但畢竟這并不影響業(yè)務(wù)流程的正常操作，況且也很少有人會在軟鍵盤彈出后去滑動頁面，因此translate還是比absolute更勝一籌?；蛟S有些同學(xué)會問怎樣開啟3D加速，很簡單，要只用到css3任何一個3D屬性都會觸發(fā)硬件加速，例如transform:translateZ(0)。

二、解決scrollFree參數(shù)失效

剛剛又看了一下IScroll5的源碼，它的選項(xiàng)參數(shù)是freeScroll，我把free和scroll的順序搞反了，糗大了。本來還想著使用和iscroll一樣的API，避免打亂用戶習(xí)慣，現(xiàn)在JRoll已經(jīng)上線了，改回來不太好，將錯就錯吧。iscroll的freeScroll實(shí)現(xiàn)方法是先滑動再判斷要鎖定哪個方向，這種做法導(dǎo)致的問題就是在斜向滑動時判斷失效。這里，額外補(bǔ)充一個小知識，preventDefault阻止瀏覽器默認(rèn)行為這個屬性在滑動過程中才設(shè)置是不會生效的。例如，你想在橫向滑動時將preventDefault設(shè)為true，可以通過e.pageX和e.pageY的差值比較判斷正在進(jìn)行橫向滑動還是豎向滑動抑或是斜向滑動，當(dāng)然一般很少判斷斜向滑動，pageX的差值比pageY的差值大時都當(dāng)作是橫向滑動。此時，如果你先豎向滑動，滑動已經(jīng)開始，然后再橫向滑動，preventDefault并不會起作用。jroll修正freeScroll的方法是先判斷要鎖定哪個方向再執(zhí)行滑動。簡單點(diǎn)說，就是touchmove的第一個移動位置不會使頁面滑動，而是用于判斷將要進(jìn)行的方向，第二個移動位置才開始滑動頁面。

三、去繁從簡

iscroll將各項(xiàng)功能都拆分成單個文件，每個文件又不能一起使用，在一個項(xiàng)目既用到zoom又用到probe的話確實(shí)很讓人頭疼。jroll使用一個文件實(shí)現(xiàn)了滾動條、縮放、事件監(jiān)聽等功能，開發(fā)者可不必再為到底使用哪個文件而手足無措。至于無限循環(huán)這個功能，將會做成jroll的插件。同時，基于jroll滑動的插件，如日期控件、日歷控件、分頁等等鄙人也在謀劃中，完成之后，html5開發(fā)的應(yīng)用可不必使用input[type=date]來調(diào)用原生日期組件，直接調(diào)用jroll的日期插件可做到所有移動終端對于日期控件這塊體驗(yàn)一致，敬請期待。

四、專注移動

iscroll為了兼容各種終端，而且升級后廢棄的代碼也沒有刪除，因此文件越來越龐大，這并不利用移動應(yīng)用的開發(fā)。jroll一個嶄新的產(chǎn)品，沒有歷史遺留問題，而且專注于移動應(yīng)用開發(fā)，代碼相當(dāng)精簡，源文件24k，經(jīng)過UglifyJS壓縮后才12k。當(dāng)然也使用了mousemove、mousewheel等兼容谷歌瀏覽器非移動模擬器模式，這也是為了方便開發(fā)調(diào)試，占用的代碼量很少。jroll沒有像iscroll那樣在touchstart時preventDefault，因此不需要click:true來允許點(diǎn)擊a鏈接。jroll在安卓方面做了自動定位表單的優(yōu)化，即是點(diǎn)擊input時可自動將input定位到可見位置不會被軟鍵盤遮擋，ios會自動定位不需要我們多此一舉去優(yōu)化。

好了，說了這么多，讓大家一起來領(lǐng)略一下jroll。

jroll有五種引入方式：普通引入、CommonJS規(guī)范引入、RequireJS規(guī)范引入、SeaJS規(guī)范引入和強(qiáng)制普通方式引入。

使用時也是像iscroll那樣new一個。jroll = new JRoll("#wrapper", {bounce:true, zoom:true, ...})。

可選項(xiàng)一覽表：

可選值	默認(rèn)值	說明
scroll	true	使能滑動
scrollX	true	使能橫向滑動
scrollY	true	使能豎向滑動
scrollFree	false	使能自由滑動，默認(rèn)情況下，x方向在滑動時，y方向不能滑動，相反亦然，如果應(yīng)用于對圖片進(jìn)行放大滑動，可將此參數(shù)設(shè)為true，如果此參數(shù)設(shè)為true，請務(wù)必將bounce設(shè)為false，否則將影響滑動效果
zoom	false	使能縮放
zoomMin	1	最小縮放倍數(shù)
zoomMax	4	大縮放倍數(shù)
bounce	false	使能回彈
scrollBarX	false	開啟x滾動條，若將此參數(shù)設(shè)為字符串，例scrollBarX:'custom'，可對滾動條樣式進(jìn)行自定義
scrollBarY	false	開啟y滾動條，與scrollBarX類似用法
scrollBarFade	false	開啟滾動條的漸隱模式
stopPropagation	false	禁止事件冒泡
preventDefault	true	禁止touchmove默認(rèn)事件，默認(rèn)為true，當(dāng)preventDefault為false時有可能觸發(fā)瀏覽器自帶的左右滑動切換頁面功能，而且像QQ手機(jī)瀏覽器(Android4.2)會出現(xiàn)無法滑動的奇葩現(xiàn)象，因此本站不建議將preventDefault設(shè)為false。
momentum	true	滾動平滑過渡，如果設(shè)為false，手指釋放后將馬上停止滑動
autoStyle	true	為wrapper 和scroller（wrapper 的第一個子元素）添加樣式，默認(rèn)如果wrapper 的position為static，將被修改成relative，并將overflow設(shè)為hidden，scroller 的min-height設(shè)為100%
g	0.0008	模擬重力加速度，g值越小，運(yùn)動時間越長
adjustTop	190	安卓手機(jī)輸入表單時自動調(diào)整輸入框位置，默認(rèn)190，表示輸入框距離頂部190px
scroller	wrapper的第一個子元素	指定scroller，不可動態(tài)更改，可以是id選擇器字符串#scroller，也可以是dom對象document.getElementById('scroller')

兩個常用方法：refresh和scrollTo。

能看到這里，說明你很有毅力，若要更詳細(xì)的了解jroll，可訪問JRoll，現(xiàn)已開源到oschina，源碼地址：https://git.oschina.net/chenjianlong/JRoll

ps：一眨眼一年過去了，去年給客戶做的作品現(xiàn)在已經(jīng)訪問不到了，唉，有時不得不感慨，現(xiàn)在的人腫么都那么浮躁，說好要做品牌的，結(jié)果才一年，客戶就把網(wǎng)站關(guān)掉了。不過請大家放心，jroll是放在我自己的服務(wù)器上的，絕對不會那么輕易閉站。只是窮屌絲只買得起阿里云550元每年的產(chǎn)品，訪問量多了可能會擠爆，沒關(guān)系，還可以到開源中國去下載源碼或在51cto本博客留言問我拿。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標(biāo)題：移動前端滑動插件——JRoll-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://muchs.cn/article4/hedoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、微信公眾號、品牌網(wǎng)站建設(shè)、電子商務(wù)、做網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)