【sui-mobile踩坑之旅】實作橫向滾動清單

好久沒有跟新文章了，心裡有些小激動呢。。

今天來講一下sui-mobile(阿裡前端架構)所遇到的一個問題，實作橫向滾動清單。

google了一上午，最後決定使用iscroll.js實作橫向滾動。把iscroll.js引入工程，在頁面加上橫向滾動的代碼，興高采烈的打開網頁，結果橫向滾動不了。。。。第一反應是代碼用錯了，仔細核對了一下，再次嘗試，還是滾動不了。。。。推測可能是和sui-mobile沖突了，把代碼添加到一個沒有使用sui-mobile的頁面進行測試。果然，這個橫向滾動式可以的。。。馬上去sui-mobile的github上去查一下有沒有人和我遇到一樣的問題，還真查到一個提問的童鞋，但是他們的回答并沒有太多的幫助，隻是讓我知道sui-mobile是自帶iscroll的。。。。。我之前是多麼沒仔細看文檔

。。果斷把引入的iscroll.js删了。。。

之後又試了一個小時，還是滾動不了，就采用了最簡單的方法，一步步的打斷點檢視源碼。

最開始定位到這句代碼：

 me.addEvent = function(el, type, fn, capture) {

            el.addEventListener(type, fn, !!capture);

};

同時對sm.js和isroll.js打斷點發現，上面代碼的type參數不一緻，然後定位到了utils.addEvent這個位置

var eventType = remove ? utils.removeEvent : utils.addEvent,

                target = this.options.bindToWrapper ? this.wrapper : window;

這個地方沒有發現什麼什麼問題，繼續定位到了初始化（init方法），最終發現了不同的地方：

iscroll.js的代碼是：

this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;

this.scroller = this.wrapper.children[0];

this.scrollerStyle = this.scroller.style; // cache style for better performance

sm.js的代碼是：

this.wrapper = typeof el === 'string' ? document.querySelector(el) : el;

this.scroller = $(this.wrapper).find('.content-inner')[0]; // jshint ignore:line

sm.js重寫了iscroll.js，擷取scroller的方法不同。。。

解決辦法：

在需要滾動的區域加上'content-inner'這個類就ok。。

sui-mobile已經半年都沒更新了。。哎。。不多說了，繼續踩坑去了。。。