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

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

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

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

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

—— 2018年12月05日更新

------------------------------------------- 我是分隔線(xiàn)，以下是原文 ----------------------------------------

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

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

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

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

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

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

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

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

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

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

5、滑動(dòng)表單時(shí)光標(biāo)丟失

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

一、突破性能瓶頸

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

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

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

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

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

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

三、去繁從簡(jiǎn)

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

四、專(zhuān)注移動(dòng)

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

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

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

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

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

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

兩個(gè)常用方法：refresh和scrollTo。

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

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

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

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

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

廣告

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