当前位置:  软件>JavaScript软件

移动 Web 端滚动框架 XScroll

    来源:    发布时间:2015-01-01

    本文导语:  XScroll 是移动端web高性能模拟滚动解决方案,包含节点回收、下拉刷新、上拉加载等功能。 XScroll config: renderTo 渲染节点,内部需要包含class为xs-container,xs-content两个容器 height 外容器视窗高度 width 外容器视窗宽度 containerHei...

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 = ''+row.data.text+'
'+                         'mark
'+                         'delete
';     } }); 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?



    
 
 

您可能感兴趣的文章:

  • 开源移动CMS框架 墨颀移动CMS
  • 移动 Web 开发框架 Lungo.JS
  • 开源移动开发框架 Kurogo
  • HTML5移动页面框架 Junior
  • 移动开发框架 Open mobile IS
  • HTML5移动应用开发框架 Mobello
  • 移动Web框架 SnippetSpace
  • 移动 JS 框架 Moobile
  • 移动 Web 开发框架 sidetap
  • HTML5 移动应用框架 ionic
  • 移动 Web 框架 jQT
  • 新的移动Web UI框架 App-UI
  • 移动UI框架 Fries
  • 移动JavaScript框架 Zepto.js
  • 移动优先的 CSS 框架 Cardinal
  • 移动端web框架 Frozen UI
  • 移动WebApp开发框架 Clouda
  • 移动游戏软件框架 Unity3D
  • 移动 webapp 框架 Jingle
  • 移动设备开发框架 Joshfire
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 移动 Web 的 CSS 样式工具库 Rider
  • 移动Web开发UI组件库 JMUI
  • Web和移动应用后端平台 Usergrid
  • 手机移动 Web 开发框架 ChocolateChip-UI
  • 2014值得推荐的10个移动 Web 应用程序开发框架
  • 腾讯移动Web前端知识库 Mars
  • 移动Web滑动特效 SlipJs
  • 移动端 Web UI 框架 CMUI
  • 腾讯移动Web前端框架 Pro
  • 轻量级高性能移动web框架 Javascript Mobile Framework
  • Web服务器/前端 iis7站长之家
  • 跨平台移动WEB应用开发框架iMAG入门教程
  • 想将系统装入移动硬盘但是安装过程中找不到移动硬盘
  • 求一批量移动文件的liunx指令,按时间倒序移动10W条
  • 如何移动整体移动大块内存,用哪个函数???
  • vim中一行内容太多折行,用移动命令却无法移动到中间一行
  • Jquery创建层显示标题和内容且随鼠标移动而移动
  • LINUX 如何移动光标
  • 高手看过来:请教如何在移动硬盘上安装Linux?
  • 移动硬盘使用问题求解?百分相赠!!
  • 移动端滑动JS库 swipejs
  • 如何将Ubuntu安装到可移动硬盘上
  • linux系统如何向移动硬盘中导数据
  • gtk窗口移动后屏幕锁定且无响应
  • solaris下如何格式化移动硬盘
  • 移动购物车应用 MobileCartly
  • 如何用mv移动多个文件
  • linux与移动硬盘?
  • centos 无法挂载 移动硬盘
  • 已经安装到移动硬盘上的ubuntu怎样在其它电脑上使用
  • 电子商务移动客户端 ECMobile


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3