bui.list Class

Defined in: /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:7

Module: UI

列表下拉刷新

这是用得最多的一个控件, 你只需要传一个数据请求的地址及列表模板, 分页及交互都由控件完成. 模板的构建可以使用最简单的html字符串,也可以使用其它模板插件, 甚至目前比较流行的Vuejs 都可以很好的配合.

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 1.4.7/src/lib/ui/bui.list.js:7

Parameters:

option Object
- id String
  
  [控件id]
- url String
  
  [数据请求地址]
- [data] Object optional
  
  [数据请求许可参数]
- [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字符串 ]
- [onRefresh] Function optional
  
  [ 刷新数据以后的回调 ]
- [onLoad] 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:

        <div id="scroll" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                <ul class="bui-list">
                </ul>
            </div>
            <div class="bui-scroll-foot"></div>
        </div>

js:

      // 假设: userlist.json 返回的数据格式为: { status:200, list:[] }, 配置 field: {data:"list"}

        // 初始化
        var uilist = bui.list({ 
            id: "#scroll",
            url: "http://www.easybui.com/demo/json/userlist.json",
            data: {},
            height:300,
            field: {
              data: "data"
            },
            template: template,
            callback: function(e) {
              // 解决zepto的事件委托冲突 bui-btn 为整行的样式
              if( $(e.target).hasClass("bui-btn") ){
                  // 点击整行的时候执行
                  console.log(this)
              }
            }
          });

        // 生成模板
        function template (data) {
            var html = "";

            $.each(data,function(index, el) {

                html += '<li class="bui-btn"><i class="icon-facefill"></i>'+el.name+'</li>';
            });

            return html;
        }

Index
Methods
Events

Item Index

Events

Methods

`destroy`

(

[bool]

)

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:522

Available since 1.4.2

[销毁控件]

Parameters:

[bool] Boolean optional

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

Example:

       //销毁
       uiList.destroy();

`empty`

(

[bool]

)

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:506

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 1.4.7/src/lib/ui/bui.list.js:200

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

Parameters:

[option] Object optional

[参数控件本身]

`modify`

(

[option]

)

chainable

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:604

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

Parameters:

[option] Object optional

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

Example:

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

`option`

(

[key]
[value]

)

chainable

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:569

获取设置参数

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 1.4.7/src/lib/ui/bui.list.js:468

Available since 1.3.0

刷新方法

Example:

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

`widget`

(

[name]

)

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:550

获取依赖的控件

Parameters:

[name] String optional

[ 依赖控件名 scroll ]

Example:

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

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

Events

`off`

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:644

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] String optional

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

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

Example:

       uiListScroll.off("refresh");

`on`

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.list.js:624

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] String optional

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

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

Example:

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