XScroll移動(dòng) Web 端滾動(dòng)框架

XScroll 是移動(dòng)端web高性能模擬滾動(dòng)解決方案，包含節(jié)點(diǎn)回收、下拉刷新、上拉加載等功能。

XScroll

• config：

  • renderTo 渲染節(jié)點(diǎn)，內(nèi)部需要包含class為xs-container，xs-content兩個(gè)容器

  • height 外容器視窗高度

  • width 外容器視窗寬度

  • containerHeight 內(nèi)容器高度

  • containerWidth 內(nèi)容器寬度

  • scrollbarX 是否開(kāi)啟橫向滾動(dòng)條

  • scrollbarY 是否開(kāi)啟縱向滾動(dòng)條

  • lockX 是否鎖定橫向滾動(dòng)

  • lockY 是否鎖定縱向滾動(dòng)

  • gpuAcceleration 是否開(kāi)啟GPU硬件加速（在性能提升的同時(shí)需要注意內(nèi)存控制）

• enableGPUAcceleration() 開(kāi)啟硬件加速

• disableGPUAcceleration() 開(kāi)啟硬件加速

• getOffset() 獲取水平和垂直偏移量，如:{x:0,y:100}

• getOffsetTop() 獲取垂直偏移量

• getOffsetLeft() 獲取水平偏移量

• scrollTo(offset, duration, easing, callback) 滾動(dòng)到某處 offset必須為{x:a,y:b}格式。

• scrollX(x, duration, easing, callback) 水平滾動(dòng)到某處

• scrollY(y, duration, easing, callback) 垂直滾動(dòng)到某處

• bounce(enable,callback) 手動(dòng)觸發(fā)邊緣回彈

• on(event,handler) 監(jiān)聽(tīng)某個(gè)事件

• fire(event) 觸發(fā)某個(gè)事件

• detach(event,[handler]) 移除某個(gè)事件

• plug(plugin) 綁定插件

• unplug(pluginId|plugin) 移除某插件

• getPlugin(pluginId) 獲取某個(gè)插件

XList

• extand XScroll

• config：

  • renderHook 逐行渲染的function，和傳入的data相關(guān)聯(lián)

  • itemHeight 默認(rèn)每行行高,如果data中有定義，則該屬性被覆蓋

  • data 頁(yè)面的數(shù)據(jù)，為一個(gè)Array,數(shù)組中每個(gè)對(duì)象必須為{data:{},style:{},recycled:false} 的格式，其中data代表真實(shí)數(shù)據(jù)，style代表樣式，recycled代表當(dāng)前行dom是否需要回收

• appendDataSet(dataset) 添加一個(gè)數(shù)據(jù)集合

• removeDataSet(datasetId) 移除一個(gè)數(shù)據(jù)集合

• getDataSets() 獲取所有數(shù)據(jù)集合

• getDataSetById(datasetId) 根據(jù)集合ID獲取數(shù)據(jù)集合

• getCellByPageY(pageY) 根據(jù)視圖坐標(biāo)位置獲取當(dāng)前行單元

• getCellByRow(row) 根據(jù)行號(hào)獲取當(dāng)前單元

• getCellByOffsetY(offsetY) 根據(jù)當(dāng)前滾動(dòng)容器的offsetTop值獲取當(dāng)前單元

• insertData(datasetIndex,rowIndex,data) 插入某組數(shù)據(jù)，插入位置為第datasetIndex組，第rowIndex行

• getData(datasetIndex,rowIndex)

• updateData(datasetIndex,rowIndex,data)

• removeData(datasetIndex,rowIndex)

Private Methods

• _getDomInfo() 獲取當(dāng)前xlist文檔流內(nèi)所有元素的位置、樣式、數(shù)據(jù)信息

XList.DataSet

Example:

var xlist = new XList({
   //set configs here
})

var dataset = new XList.DataSet({
    id:"section1",
    data:[
    {
        data:{
            name:"Jack"
        }
    },
    {
        data:{
            name:"Tom"
        }
    }
    ]
});

//appendTo Xlist
xlist.appendDataSet(dataset);

//reflow
xlist.render();

• config

  • id 唯一ID，可省略

  • data 傳入數(shù)據(jù)

• appendData(data) 追加數(shù)據(jù)

• insertData(index,data) 插入數(shù)據(jù)至某處

• removeData(index) 刪除數(shù)據(jù)

• getData(index) 獲取數(shù)據(jù)，參數(shù)為空則所有數(shù)據(jù)

• setId(datasetId) 設(shè)置ID

• getId() 獲取ID

Plugins

PullDown

• pull down to refresh or reload.

Example

    var xlist = new XList();
    // or XScroll.Plugin.PullDown
    var pulldown = new XList.Plugin.PullDown();
    //plug
    xlist.plug(pulldown);

    xlist.render();

• config

  • content 內(nèi)容，若需要使用動(dòng)畫(huà)進(jìn)行如上下箭頭切換，則配置此項(xiàng)

  • downContent 下拉前展示的內(nèi)容，默認(rèn)為'Pull Down To Refresh'

  • upContent 松手展示內(nèi)容，默認(rèn)為'Release To Refresh'

  • loadingContent 加載中展示內(nèi)容，默認(rèn)為'Loading...'

  • prefix class前綴，默認(rèn)為'xs-plugin-pulldown-'

  • height 進(jìn)行下拉和松手以及加載狀態(tài)切換的高度，默認(rèn)60

• setContent(html) 改變數(shù)據(jù)

• reset(callback) 數(shù)據(jù)加載完畢后，通知控件進(jìn)行回彈

• on("loading",fn) 監(jiān)聽(tīng)loading事件，進(jìn)行異步請(qǐng)求等邏輯

PullUp

• pull up to reload.

Example

    var xlist = new XList();

    var pullup = new XList.Plugin.PullUp();
    //plug
    xlist.plug(pullup);

    xlist.render();

    pullup.on("loading",function(){
        // get remote data
        getData();
    });

    var page = 1,
        totalPage = 10;

    function getData(){
      //  $.ajax({
            url:"demo.php",
            dataType:"json",
            callback:function(data){
                if(page > totalPage) {
                    //last page
                    pullup.reset();
                    //destroy plugin
                    xlist.unplug(pullup);
                    return; 
                };
                ds.appendData(data);
                xlist.render();
                 //loading complate
                pullup.complete();
                page++;
            }

      })
    }

• config

  • content 內(nèi)容，同PullDown

  • upContent 下拉前展示的內(nèi)容，默認(rèn)為'Pull Up To Refresh'

  • downContent 松手展示內(nèi)容，默認(rèn)為'Release To Refresh'

  • loadingContent 加載中展示內(nèi)容，默認(rèn)為'Loading...'

  • prefix class前綴，默認(rèn)為'xs-plugin-pullup-'

  • height 加載狀態(tài)時(shí)底部被拓展的邊界高度，默認(rèn)40

  • pullUpHeight up和down切換的高度，默認(rèn)80

• setContent(html) 改變數(shù)據(jù)

• reset(callback) 數(shù)據(jù)加載完畢后，通知控件進(jìn)行回彈

• on("loading",fn) 監(jiān)聽(tīng)loading事件，進(jìn)行異步請(qǐng)求等邏輯

• complete() 加載結(jié)束后恢復(fù)上拉控件的狀態(tài)至'up'

SwipeEdit

• swipe left to delete or favourite etc.

Example

var xlist = new XList({
    renderTo: "#J_Scroll",
    data: data,
    itemHeight: 62 ,
    infiniteElements:"#J_Scroll .xs-row",
    renderHook:function(el,row){
        el.innerHTML = '<div class="lbl">'+row.data.text+'</div>'+
                        '<div class="control"><div class="btn btn-mark">mark</div>'+
                        '<div class="btn btn-delete">delete</div></div>';
    }
});

var swipeEditPlugin = new XList.Plugin.SwipeEdit({
    labelSelector:".lbl",
    width:maxWidth
});

xlist.plug(swipeEditPlugin);

xlist.on("click",function(e){
    //delete
    if(e.target.className.match("btn-delete")){
       xlist.removeData(0,e.cell._row)
       xlist.render();
    }
    //mark
    if(e.target.className.match("btn-mark") && !e.target.className.match("btn-marked")){
        var data = xlist.getData(0,e.cell._row)
        data.data.marked = true;
        e.target.className += " btn-marked";
    }
})

xlist.on("click", function(e) {
    //hide the buttons
    if(!e.target.parentNode.className.match('control')){
        swipeEditPlugin.slideAllExceptRow();
    }
});

xlist.render();

• config

  • labelSelector 操作欄的類選擇器，如'.lbl'

  • width 操作欄總寬度

Questions?

• Email：[email protected]