移動 Web 端滾動框架：XScroll
XScroll 是移動端web高性能模擬滾動解決方案，包含節點回收、下拉刷新、上拉加載等功能。
XScroll
-
config： -
renderTo渲染節點，內部需要包含class為xs-container，xs-content兩個容器 -
height外容器視窗高度 -
width外容器視窗寬度 -
containerHeight內容器高度 -
containerWidth內容器寬度 -
scrollbarX是否開啟橫向滾動條 -
scrollbarY是否開啟縱向滾動條 -
lockX是否鎖定橫向滾動 -
lockY是否鎖定縱向滾動 -
gpuAcceleration是否開啟GPU硬件加速（在性能提升的同時需要注意內存控制） -
enableGPUAcceleration()開啟硬件加速 -
disableGPUAcceleration()開啟硬件加速 -
getOffset()獲取水平和垂直偏移量，如:{x:0,y:100} -
getOffsetTop()獲取垂直偏移量 -
getOffsetLeft()獲取水平偏移量 -
scrollTo(offset, duration, easing, callback)滾動到某處 offset必須為{x:a,y:b}格式。 -
scrollX(x, duration, easing, callback)水平滾動到某處 -
scrollY(y, duration, easing, callback)垂直滾動到某處 -
bounce(enable,callback)手動觸發邊緣回彈 -
on(event,handler)監聽某個事件 -
fire(event)觸發某個事件 -
detach(event,[handler])移除某個事件 -
plug(plugin)綁定插件 -
unplug(pluginId|plugin)移除某插件 -
getPlugin(pluginId)獲取某個插件
XList
-
extand XScroll
-
config： -
renderHook逐行渲染的function，和傳入的data相關聯 -
itemHeight默認每行行高,如果data中有定義，則該屬性被覆蓋 -
data頁面的數據，為一個Array,數組中每個對象必須為{data:{},style:{},recycled:false} 的格式，其中data代表真實數據，style代表樣式，recycled代表當前行dom是否需要回收 -
appendDataSet(dataset)添加一個數據集合 -
removeDataSet(datasetId)移除一個數據集合 -
getDataSets()獲取所有數據集合 -
getDataSetById(datasetId)根據集合ID獲取數據集合 -
getCellByPageY(pageY)根據視圖坐標位置獲取當前行單元 -
getCellByRow(row)根據行號獲取當前單元 -
getCellByOffsetY(offsetY)根據當前滾動容器的offsetTop值獲取當前單元 -
insertData(datasetIndex,rowIndex,data)插入某組數據，插入位置為第datasetIndex組，第rowIndex行 -
getData(datasetIndex,rowIndex) -
updateData(datasetIndex,rowIndex,data) -
removeData(datasetIndex,rowIndex)
Private Methods
-
_getDomInfo()獲取當前xlist文檔流內所有元素的位置、樣式、數據信息
XList.DataSet
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傳入數據 -
appendData(data)追加數據 -
insertData(index,data)插入數據至某處 -
removeData(index)刪除數據 -
getData(index)獲取數據，參數為空則所有數據 -
setId(datasetId)設置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內容，若需要使用動畫進行如上下箭頭切換，則配置此項 -
downContent下拉前展示的內容，默認為'Pull Down To Refresh' -
upContent松手展示內容，默認為'Release To Refresh' -
loadingContent加載中展示內容，默認為'Loading...' -
prefixclass前綴，默認為'xs-plugin-pulldown-' -
height進行下拉和松手以及加載狀態切換的高度，默認60 -
setContent(html)改變數據 -
reset(callback)數據加載完畢后，通知控件進行回彈 -
on("loading",fn)監聽loading事件，進行異步請求等邏輯
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內容，同PullDown -
upContent下拉前展示的內容，默認為'Pull Up To Refresh' -
downContent松手展示內容，默認為'Release To Refresh' -
loadingContent加載中展示內容，默認為'Loading...' -
prefixclass前綴，默認為'xs-plugin-pullup-' -
height加載狀態時底部被拓展的邊界高度，默認40 -
pullUpHeightup和down切換的高度，默認80 -
setContent(html)改變數據 -
reset(callback)數據加載完畢后，通知控件進行回彈 -
on("loading",fn)監聽loading事件，進行異步請求等邏輯 -
complete()加載結束后恢復上拉控件的狀態至'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：huxiaoqi567@gmail.com