XScroll XScroll<a href="https://github.com/huxiaoqi567/xscroll#xlist"></a>XList<a href="https://github.com/huxiaoqi567/xscroll#xlistdataset"></a>XList.DataSet<a href= 介绍
XScroll 是移动端web高性能模拟滚动解决方案，包含节点回收、下拉刷新、上拉加载等功能。
XScroll
-
config：
-
enableGPUacceleration() 开启硬件加速
-
disableGPUacceleration() 开启硬件加速
-
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) 移除某插件
XList
-
extand XScroll
-
config：
-
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)
- _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
- 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
-
setContent(html) 改变数据
-
reset(callback) 数据加载完毕后，通知控件进行回弹
-
on("loading",fn) 监听loading事件，进行异步请求等逻辑
- 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
-
setContent(html) 改变数据
-
reset(callback) 数据加载完毕后，通知控件进行回弹
-
on("loading",fn) 监听loading事件，进行异步请求等逻辑
-
complete() 加载结束后恢复上拉控件的状态至’up’
- 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
XScroll XScroll<a href="https://github.com/huxiaoqi567/xscroll#xlist"></a>XList<a href="https://github.com/huxiaoqi567/xscroll#xlistdataset"></a>XList.DataSet<a href= 官网
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
