移动 Web 端滚动框架:XScroll

jopen 7年前

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 XScroll

  • 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)

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

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

    • content 内容,若需要使用动画进行如上下箭头切换,则配置此项

    • downContent 下拉前展示的内容,默认为'Pull Down To Refresh'

    • upContent 松手展示内容,默认为'Release To Refresh'

    • loadingContent 加载中展示内容,默认为'Loading...'

    • prefix class前缀,默认为'xs-plugin-pulldown-'

    • height 进行下拉和松手以及加载状态切换的高度,默认60

  • setContent(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++;              }          })      }
  • config

    • content 内容,同PullDown

    • upContent 下拉前展示的内容,默认为'Pull Up To Refresh'

    • downContent 松手展示内容,默认为'Release To Refresh'

    • loadingContent 加载中展示内容,默认为'Loading...'

    • prefix class前缀,默认为'xs-plugin-pullup-'

    • height 加载状态时底部被拓展的边界高度,默认40

    • pullUpHeight up和down切换的高度,默认80

  • setContent(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 = '<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?

项目主页:http://www.open-open.com/lib/view/home/1414814566637