XScroll 移动 Web 端滚动框架开源项目

我要开发同款
匿名用户2014年10月31日
92阅读

技术信息

开源地址
https://github.com/huxiaoqi567/xscroll
授权协议
MIT

作品详情

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)获取某个插件

XList

extadXScroll

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.DataSet

Example:

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

PlugisPullDow

pulldowtorefreshorreload.

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事件,进行异步请求等逻辑

PullUp

pulluptoreload.

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'

SwipeEdit

swipelefttodeleteorfavouriteetc.

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

 

功能介绍

XScroll 是移动端web高性能模拟滚动解决方案,包含节点回收、下拉刷新、上拉加载等功能。 XScroll config: renderTo 渲染节点,内部需要包含class为xs-cont...

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论