BUI

其它版本:

API for BUI 1.5.1

Show:

bui.list Class

列表下拉刷新

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

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

预览地址: demo

方法说明:

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

Constructor

bui.list

(
  • option
)

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新增 初始化以后触发 ]

    • [onRefresh] Function optional

      [ 刷新数据以后的回调 ]

    • [onLoad] Function optional

      [ 页面渲染完成以后的回调 ]

    • [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:

        <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: "#scrollList",
    url: "http://www.easybui.com/demo/json/shop.json",
    pageSize:5,
    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

Events

Methods

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
       uiList.destroy();

empty

(
  • [bool]
)

[清空数据]

Parameters:

  • [bool] Boolean optional

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

Example:

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

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    [参数控件本身]

modify

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

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

Example:

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

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

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

()

刷新方法

Example:

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

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 scroll ]

Example:

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

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

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

       uiListScroll.off("refresh");

on

为控件绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

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