XScroll是移动端web高性能模拟滚动解决方案,包含节点回收、下拉刷新、上拉加载等功能。
XScroll
cofig:
rederTo渲染节点,内部需要包含class为xs-cotaier,xs-cotet两个容器
height外容器视窗高度
width外容器视窗宽度
cotaierHeight内容器高度
cotaierWidth内容器宽度
scrollbarX是否开启横向滚动条
scrollbarY是否开启纵向滚动条
lockX是否锁定横向滚动
lockY是否锁定纵向滚动
gpuAcceleratio是否开启GPU硬件加速(在性能提升的同时需要注意内存控制)
eableGPUAcceleratio()开启硬件加速
disableGPUAcceleratio()开启硬件加速
getOffset()获取水平和垂直偏移量,如:{x:0,y:100}
getOffsetTop()获取垂直偏移量
getOffsetLeft()获取水平偏移量
scrollTo(offset,duratio,easig,callback)滚动到某处offset必须为{x:a,y:b}格式。
scrollX(x,duratio,easig,callback)水平滚动到某处
scrollY(y,duratio,easig,callback)垂直滚动到某处
bouce(eable,callback)手动触发边缘回弹
o(evet,hadler)监听某个事件
fire(evet)触发某个事件
detach(evet,[hadler])移除某个事件
plug(plugi)绑定插件
uplug(plugiId|plugi)移除某插件
getPlugi(plugiId)获取某个插件
XListextadXScroll
cofig:
rederHook逐行渲染的fuctio,和传入的data相关联
itemHeight默认每行行高,如果data中有定义,则该属性被覆盖
data页面的数据,为一个Array,数组中每个对象必须为{data:{},style:{},recycled:false}的格式,其中data代表真实数据,style代表样式,recycled代表当前行dom是否需要回收
appedDataSet(dataset)添加一个数据集合
removeDataSet(datasetId)移除一个数据集合
getDataSets()获取所有数据集合
getDataSetById(datasetId)根据集合ID获取数据集合
getCellByPageY(pageY)根据视图坐标位置获取当前行单元
getCellByRow(row)根据行号获取当前单元
getCellByOffsetY(offsetY)根据当前滚动容器的offsetTop值获取当前单元
isertData(datasetIdex,rowIdex,data)插入某组数据,插入位置为第datasetIdex组,第rowIdex行
getData(datasetIdex,rowIdex)
updateData(datasetIdex,rowIdex,data)
removeData(datasetIdex,rowIdex)
PrivateMethods_getDomIfo()获取当前xlist文档流内所有元素的位置、样式、数据信息
XList.DataSetExample:
var xlist = ew XList({ //set cofigs here})var dataset = ew XList.DataSet({ id:"sectio1", data:[ { data:{ ame:"Jack" } }, { data:{ ame:"Tom" } } ]});//appedTo Xlistxlist.appedDataSet(dataset);//reflowxlist.reder();cofig
id唯一ID,可省略
data传入数据
appedData(data)追加数据
isertData(idex,data)插入数据至某处
removeData(idex)删除数据
getData(idex)获取数据,参数为空则所有数据
setId(datasetId)设置ID
getId()获取ID
PlugisPullDowpulldowtorefreshorreload.
Example
var xlist = ew XList(); // or XScroll.Plugi.PullDow var pulldow = ew XList.Plugi.PullDow(); //plug xlist.plug(pulldow); xlist.reder();cofig
cotet内容,若需要使用动画进行如上下箭头切换,则配置此项
dowCotet下拉前展示的内容,默认为'PullDowToRefresh'
upCotet松手展示内容,默认为'ReleaseToRefresh'
loadigCotet加载中展示内容,默认为'Loadig...'
prefixclass前缀,默认为'xs-plugi-pulldow-'
height进行下拉和松手以及加载状态切换的高度,默认60
setCotet(html)改变数据
reset(callback)数据加载完毕后,通知控件进行回弹
o("loadig",f)监听loadig事件,进行异步请求等逻辑
PullUppulluptoreload.
Example
var xlist = ew XList(); var pullup = ew XList.Plugi.PullUp(); //plug xlist.plug(pullup); xlist.reder(); pullup.o("loadig",fuctio(){ // get remote data getData(); }); var page = 1, totalPage = 10; fuctio getData(){ // $.ajax({ url:"demo.php", dataType:"jso", callback:fuctio(data){ if(page > totalPage) { //last page pullup.reset(); //destroy plugi xlist.uplug(pullup); retur; }; ds.appedData(data); xlist.reder(); //loadig complate pullup.complete(); page++; } }) }cofig
cotet内容,同PullDow
upCotet下拉前展示的内容,默认为'PullUpToRefresh'
dowCotet松手展示内容,默认为'ReleaseToRefresh'
loadigCotet加载中展示内容,默认为'Loadig...'
prefixclass前缀,默认为'xs-plugi-pullup-'
height加载状态时底部被拓展的边界高度,默认40
pullUpHeightup和dow切换的高度,默认80
setCotet(html)改变数据
reset(callback)数据加载完毕后,通知控件进行回弹
o("loadig",f)监听loadig事件,进行异步请求等逻辑
complete()加载结束后恢复上拉控件的状态至'up'
SwipeEditswipelefttodeleteorfavouriteetc.
Example
var xlist = ew XList({ rederTo: "#J_Scroll", data: data, itemHeight: 62 , ifiiteElemets:"#J_Scroll .xs-row", rederHook:fuctio(el,row){ el.ierHTML = '<div class="lbl">'+row.data.text+'</div>'+ '<div class="cotrol"><div class="bt bt-mark">mark</div>'+ '<div class="bt bt-delete">delete</div></div>'; }});var swipeEditPlugi = ew XList.Plugi.SwipeEdit({ labelSelector:".lbl", width:maxWidth});xlist.plug(swipeEditPlugi);xlist.o("click",fuctio(e){ //delete if(e.target.className.match("bt-delete")){ xlist.removeData(0,e.cell._row) xlist.reder(); } //mark if(e.target.className.match("bt-mark") && !e.target.className.match("bt-marked")){ var data = xlist.getData(0,e.cell._row) data.data.marked = true; e.target.className += " bt-marked"; }})xlist.o("click", fuctio(e) { //hide the buttos if(!e.target.paretNode.className.match('cotrol')){ swipeEditPlugi.slideAllExceptRow(); }});xlist.reder();cofig
labelSelector操作栏的类选择器,如'.lbl'
width操作栏总宽度
Questios?Email:huxiaoqi567@gmail.com
评论