BUI

其它版本:

API for BUI 1.5.2

Show:

bui.list Class

Defined in: /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:8
Module: UI

列表自动分页加载及刷新

注意field的配置,其中的field:{data:"data"} 为请求以后返回的数组所在字段, 对比示例的json理解. 如果结果是数组, 无需配置

list = scroll + pullrefresh 把scroll的数据请求逻辑封装,只需要传id,url,data,模板的生成器,field(把数据映射),如果需要你的页面的逻辑比较复杂,建议参考 bui.scroll

预览地址: demo

方法说明:

refresh: 手动刷新数据
option: 获取设置参数
widget: 获取依赖的scroll控件,然后使用scroll的方法
控件预览

Constructor

bui.list

(
  • option
)

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:8

Parameters:

  • option Object
    • id String

      [控件id]

    • url String

      [数据请求地址]

    • [data] Object optional

      [数据请求许可参数, 分页及分页大小在field 配置, 默认请求的分页是: "page","pageSize"]

    • [method] String optional

      ["GET" || "POST"]

    • [timeout] Number optional

      [默认:20000]

    • [headers] Object optional

      [ {} ]

    • [localData] Number optional

      [1.4.5新增,本地数据,格式保持跟接口返回数据一致,如果有本地数据,不再请求]

    • [field] Object optional

      [ 请求及返回的真实字段, 例如: 请求的分页字段为 "pagination", 大小字段名为: "psize" , 返回的数据为 {"result":[]}, 则filed = { page:"pagination",size:"psize",data:"result" } ]

      • [page] String optional
        [ 默认: "page", 分页的字段名, 如果分页的字段名不是"page",需要更改]
      • [size] String optional
        [ 默认: "pageSize", 每页多少条的字段名, 如果条数的字段名不是"pageSize",需要更改,但不能为"length"]
      • [data] String optional
        [ 默认: "", 返回的字段的数组在哪个字段, 例如, 返回的数据为 {"result":[]}, 则filed = {data:"result"} , 返回的数据有层级,则使用对象字符串, 例如 {"result":{ data: [] }}'result.data' ]
    • [page] Number optional

      [映射的请求的数据页数, 默认:1]

    • [pageSize] Number optional

      [映射的请求每页多少条, 默认:10]

    • [children] String optional

      [列表的选择器,默认: ".bui-list"]

    • [handle] String optional

      [列表的循环子元素,默认: ".bui-btn"]

    • [stopHandle] String optional

      [1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] 无法滑动的时候]

    • [height] Number optional

      [列表的高度,0 自适应]

    • [commandRefresh] String optional

      [刷新的操作,跟jquery操作dom一样, 默认是"html"|"append"|"prepend"|]

    • [commandLoad] String optional

      [加载的操作,跟jquery操作dom一样, 默认是"append"|"prepend"|]

    • autoNext Boolean

      [ 默认true 当高度不足时,会继续请求下一页,直到高度出现滚动条 ]

    • autoScroll Boolean

      [ 默认true 滚动到底部触发, false 自己监听 ]

    • refresh Boolean

      [ 允许下拉刷新, 默认true | false ]

    • [template] Function optional

      [ 请求到数据以后生成的模板,需要返回html字符串 ]

    • [onBeforeInit] Function optional

      [ 1.5.1新增 初始化前触发 ]

    • [onInited] Function optional

      [ 1.5.1新增 初始化以后触发 ]

    • [onBeforeRefresh] Function optional

      [ 1.5.2新增, 刷新前执行]

    • [onRefresh] Function optional

      [ 刷新数据以后的回调 ]

    • [onBeforeLoad] Function optional

      [ 1.5.2新增, 加载前执行]

    • [onLoad] Function optional

      [ 第1次及加载以及滚动加载以后执行,在数据渲染后 ]

    • [onFail] Function optional

      [ 失败的回调 ]

    • [callback] Function optional

      [ 点击每个handle的回调 ]

    • refreshTips.start String

      [ 开始加载的文本提醒,"刷新中.." ]

    • refreshTips.release String

      [ 下拉的文本提醒,"松开刷新" ]

    • refreshTips.end String

      [ 下拉高度不足提醒,"下拉刷新" ]

    • refreshTips.fail String

      [ 下拉加载失败提醒,"点击加载" ]

    • refreshTips.success String

      [ 成功提醒,"刷新成功" ]

    • scrollTips Object
      • start String
        [ 开始加载的文本提醒,"努力加载中.." ]
      • end String
        [ 上拉加载的提醒,"上拉加载更多" ]
      • fail String
        [ 上拉加载失败提醒,"点击重新加载" ]
      • nodata String
        [ 没有数据的提醒,"没有更多内容" ]

Example:

html:

js: // 假设: userlist.json 返回的数据格式为: { status:200, list:[] }, 配置 field: {data:"list"} // 初始化 var uiList = bui.list({ id: "#scrollList", url: "http://www.easybui.com/demo/json/shop.json", pageSize:5, data: {}, // 如果返回的数组字段不在data,通过field重新定义 field: { page: "page", size: "pageSize", data: "data" }, template: function (data) { var html = ""; data.map(function(el, index) { html +=<li class="bui-btn bui-box"> <div class="bui-thumbnail"><img src="${el.image}" alt=""></div> <div class="span1"> <h3 class="item-title">${el.name}</h3> <p class="item-text">${el.address}</p> <p class="item-text">${el.distance}公里</p> </div> <span class="price"><i>￥</i>${el.price}</span> </li> }); return html; }

Item Index

Methods

Events

Methods

destroy

(
  • [bool]
)

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:495

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

    [ 默认: false 销毁部分 | true 销毁全部 ]

Example:

       //销毁
       uiList.destroy();

empty

(
  • [bool]
)

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:479

Available since 1.4.7

[清空数据]

Parameters:

  • [bool] Boolean optional

    [ 默认: false 销毁部分 | true 销毁全部 ]

Example:

       //清空数据
       uiList.empty();

init

(
  • [option]
)
chainable

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:211

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

  • [option] Object optional

    [参数控件本身]

modify

(
  • [option]
)
chainable

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:577

修改多个参数,但不执行初始化

Parameters:

  • [option] Object optional

    [ 修改参数,跟初始化一样是一个对象. ]

Example:

       //修改多个参数
       uiList.modify( {"height":200, data:{"keyword":"关键字"}  );

option

(
  • [key]
  • [value]
)
chainable

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:542

获取设置参数

Parameters:

  • [key] String | object optional

    [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数 ]

  • [value] String | number | boolean | function optional

    [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传 ]

Example:

       //获取所有参数
       var option = uiList.option();

       //获取某个参数
       var id = uiList.option( "id" );

       //修改data参数,只是修改,不初始化. 如果修改多个参数,会自动初始化, 在onLoad 参数里面变成死循环.
       uiList.option( "data",{"keyword":"关键字"} );

       //修改多个参数
       uiList.option( {"height":200} );

refresh

()

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:441

Available since 1.3.0

刷新方法

Example:

       //获取依赖控件
       uiList.refresh();

widget

(
  • [name]
)

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:523

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 scroll ]

Example:

       //获取依赖控件
       var uiListScroll = uiList.widget("scroll");

       //使用scroll的方法
       uiListScroll.nextPage();

Events

off

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:617

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    [ 事件类型: "refreshbefore"(刷新前触发) | "refresh"(刷新后触发) | "success"(请求成功时触发) | "fail" (请求失败时触发) | "onloadbefore" | "onload" ]

  • [callback] Function optional

    [ 绑定的事件, this 为当前点击的菜单 ]

Example:

       uiListScroll.off("refresh");

on

Defined in /Users/wilson/personal/htdocs/opensource/bui-rollup/src/scripts/ui/bui.list.js:597

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    [ 事件类型: "refreshbefore"(刷新前触发) | "refresh"(刷新后触发) | "success"(请求成功时触发) | "fail" (请求失败时触发) | "onload" ]

  • [callback] Function optional

    [ 绑定的事件, this 为当前点击的菜单 ]

Example:

       uiList.on("refresh",function () {
           // 点击的菜单
           console.log(this);
       });