XScroll- 移动 Web 端滚动框架

XScroll- 移动 Web 端滚动框架

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 XScrollconfig：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

Example:

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();

configid 唯一ID，可省略data 传入数据appendData(data) 追加数据insertData(index,data) 插入数据至某处removeData(index) 删除数据getData(index) 获取数据，参数为空则所有数据setId(datasetId) 设置IDgetId() 获取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();

configcontent 内容，若需要使用动画进行如上下箭头切换，则配置此项downContent 下拉前展示的内容，默认为’Pull Down To Refresh’upContent 松手展示内容，默认为’Release To Refresh’loadingContent 加载中展示内容，默认为’Loading…’prefix class前缀，默认为’xs-plugin-pulldown-‘height 进行下拉和松手以及加载状态切换的高度，默认60setContent(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++;            }      })    }

configcontent 内容，同PullDownupContent 下拉前展示的内容，默认为’Pull Up To Refresh’downContent 松手展示内容，默认为’Release To Refresh’loadingContent 加载中展示内容，默认为’Loading…’prefix class前缀，默认为’xs-plugin-pullup-‘height 加载状态时底部被拓展的边界高度，默认40pullUpHeight up和down切换的高度，默认80setContent(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 = ''+row.data.text+'