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)获取某个插件
XListextandXScroll
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)
PrivateMethods_getDomInfo()获取当前xlist文档流内所有元素的位置、样式、数据信息
XList.DataSetExample:
var xlist = new XList({ //set configs here})var dataset = new XList.DataSet({ id:"section1", data:[ { data:{ name:"Jack" } }, { data:{ name:"Tom" } } ]});//appendTo Xlistxlist.appendDataSet(dataset);//reflowxlist.render();config
id唯一ID，可省略
data传入数据
appendData(data)追加数据
insertData(index,data)插入数据至某处
removeData(index)删除数据
getData(index)获取数据，参数为空则所有数据
setId(datasetId)设置ID
getId()获取ID
PluginsPullDownpulldowntorefreshorreload.
Example
var xlist = new XList(); // or XScroll.Plugin.PullDown var pulldown = new XList.Plugin.PullDown(); //plug xlist.plug(pulldown); xlist.render();config
content内容，若需要使用动画进行如上下箭头切换，则配置此项
downContent下拉前展示的内容，默认为'PullDownToRefresh'
upContent松手展示内容，默认为'ReleaseToRefresh'
loadingContent加载中展示内容，默认为'Loading...'
prefixclass前缀，默认为'xs-plugin-pulldown-'
height进行下拉和松手以及加载状态切换的高度，默认60
setContent(html)改变数据
reset(callback)数据加载完毕后，通知控件进行回弹
on("loading",fn)监听loading事件，进行异步请求等逻辑
PullUppulluptoreload.
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下拉前展示的内容，默认为'PullUpToRefresh'
downContent松手展示内容，默认为'ReleaseToRefresh'
loadingContent加载中展示内容，默认为'Loading...'
prefixclass前缀，默认为'xs-plugin-pullup-'
height加载状态时底部被拓展的边界高度，默认40
pullUpHeightup和down切换的高度，默认80
setContent(html)改变数据
reset(callback)数据加载完毕后，通知控件进行回弹
on("loading",fn)监听loading事件，进行异步请求等逻辑
complete()加载结束后恢复上拉控件的状态至'up'
SwipeEditswipelefttodeleteorfavouriteetc.
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
评论