bui.list Class
列表自动分页加载及刷新
注意field的配置,其中的field:{data:"data"} 为请求以后返回的数组所在字段, 对比示例的json理解. 如果结果是数组, 无需配置
list = scroll + pullrefresh 把scroll的数据请求逻辑封装,只需要传id,url,data,模板的生成器,field(把数据映射),如果需要你的页面的逻辑比较复杂,建议参考 http://www.easybui.com/demo/index.html#pages/ui_controls/bui.scroll.html" target="_blank">bui.scroll
预览地址: demo
方法说明:
refresh: 手动刷新数据option: 获取设置参数
widget: 获取依赖的scroll控件,然后使用scroll的方法
Constructor
bui.list
-
option
Parameters:
-
optionObject-
idString控件id
-
[uid]String optional1.6.6新增，实例的自定义唯一名字，用于命令式调用
-
urlString数据请求地址
-
[data]Object optional数据请求许可参数, 分页及分页大小在field 配置, 默认请求的分页是: "page","pageSize", 这里只能是对象, 如果需要JSON.stringify 转换接口才能正确接收, 可以增加一个 needJsonString: true 参数, 会进行内部转换
-
[method]String optional"GET" || "POST"
-
[headers]Object optional通过header传输的参数 {}
-
[dataType]String optional默认 json | jsonp | script | xml | html | text
-
[contentType]String optionalget默认 "", 由$.ajax处理 | post默认: 'application/x-www-form-urlencoded'(表单,接口跨域需要设置这个) | 'multipart/form-data'(表单里有file文件) | 'application/json'(后端要用@requestbody接收) 前端传过去的参数要用 JSON.stringify 转换下
-
[timeout]Number optional默认:20000
-
[headers]Object optional{}
-
[localData]Object optional1.4.5新增,本地数据,格式保持跟接口返回数据一致,如果有本地数据,不再请求
-
[field]Object optional请求及返回的真实字段, 例如: 请求的分页字段为 "pagination", 大小字段名为: "psize" , 返回的数据为 {"result":null}, 则filed={ page:"pagination",size:"psize",data:"result"};
-
[page]String optional默认: "page", 分页的字段名, 如果分页的字段名不是"page",需要更改 -
[size]String optional默认: "pageSize", 每页多少条的字段名, 如果条数的字段名不是"pageSize",需要更改,但不能为"length" -
[data]String optional默认: "", 返回的字段的数组在哪个字段, 例如, 返回的数据为 {"result":null}, 则filed = {data:"result"} , 返回的数据有层级,则使用对象字符串, 例如 {"result":{ data: null }} 则 filed = {data:"result.data"}
-
-
[page]Number optional映射的请求的数据页数, 默认:1
-
[pageSize]Number optional映射的请求每页多少条, 默认:10
-
[children]String optional列表的选择器,默认: ".bui-list"
-
[handle]String optional列表的循环子元素,默认: ".bui-btn"
-
[direction]String optional1.5.6新增 滚动的方向,默认 y || x ;
-
[distance]String optional默认 100，下拉的距离大于100才会触发刷新
-
[backDistance]String optional默认 50，下拉后回去的距离，1.8.0新增
-
[handleMove]String optional1.6.3 默认 "main" || "head", 下拉的时候一起拖动的位置, 数据量较多建议选择head
-
[loading]Object optional1.8.0 loading的配置
-
[stopHandle]String optional1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input type=range 无法滑动的时候
-
[height]Number optional列表的高度,默认适应，如果高度不对，自行计算后传给列表即可。
-
[cacheHeight]Boolean optional1.6.2新增, 默认 true | false 使用缓存的高度计算,false 则动态获取页面高度计算
-
[urlrule]Boolean optional1.6.2新增, 默认false | true (替换url的内容) 例如: 网易新闻的url规则 http://url.com/data-(page)-(size).json 替换成 http://url.com/data-1-10.json
-
[relative]Boolean optional请求的路径是否使用相对模块路径,默认: false(相对项目路径) | true(相对模块路径)
-
[commandRefresh]String optional刷新的操作,跟jquery操作dom一样, 默认是"html"|"append"|"prepend"|
-
[commandLoad]String optional加载的操作,跟jquery操作dom一样, 默认是"append"|"prepend"|
-
[needJsonString]Boolean optional1.4.6新增,默认 false|true. true时会尝试把数据转换为string. 这个主要配合list控件的特殊请求使用,正常都是一个对象, 如果为true,后台一般以@requestBody 接收,postman的body 是raw 的形式
-
autoNextBoolean[ 默认true 当高度不足时,会继续请求下一页,直到高度出现滚动条 ]
-
autoScrollBoolean[ 默认true 滚动到底部触发, false 自己监听 ]
-
autoUpdatePageBoolean[ 1.5.3 新增, 默认true 自动更新分页, 如果不是,则需要自己手动调用一次 uiList.updatePage()]
-
refreshBoolean[ 允许下拉刷新, 默认true | false ]
-
[scroll]Boolean optional1.5.6新增 默认true(允许滚动加载) | false
-
[template]Function optional请求到数据以后生成的模板,需要返回html字符串
-
[delayTime]Number optional1.8.5新增 默认 100，滚动结束后才触发onScrolling 0 则实时触发onScrolling
-
[onScrolling]Function optional1.8.5新增 滚动时触发
-
[onBeforeInit]Function optional1.5.1新增 初始化前触发
-
[onInited]Function optional1.5.1新增 初始化以后触发
-
[onBeforeRefresh]Function optional1.5.2新增, 刷新前执行
-
[proxy]String optional1.5.5新增, 内部修改接口为相对路径,值为:代理的二级目录,例如: 接口地址 http://easybui.com/api/getUser?id=123 配置 proxy: "/api" 这样接口请求就变成 api/getUser?id=123, 结合工程的 app.json 使用
-
[onRefresh]Function optional1.7.4后不推荐 刷新数据以后的回调， 第一个参数是实例本身
-
[onRefreshed]Function optional1.7.4 推荐 刷新数据以后的回调，，第一个参数是接口返回数据
-
[onBeforeLoad]Function optional1.5.2新增, 加载前执行
-
[onFirstLoad]Function optional1.7.4 新增，只有第一次初始化并取到数据的时候会执行
-
[onLoad]Function optional1.7.4后不推荐 请求数据后执行，第一个参数是实例本身
-
[onLoaded]Function optional1.7.4 推荐，请求数据后执行，第一个参数是接口返回数据
-
[onFail]Function optional失败的回调
-
[callback]Function optional点击每个handle的回调
-
[refreshTips]Object optional-
[start]String optional开始加载的文本提醒,"刷新中.." -
[release]String optional下拉的文本提醒,"松开刷新" -
[end]String optional下拉高度不足提醒,"下拉刷新" -
[fail]String optional下拉加载失败提醒,"点击加载" -
[success]String optional成功提醒,"刷新成功"
-
-
[scrollTips]Object optional-
[start]String optional开始加载的文本提醒,"努力加载中.." -
[end]String optional上拉加载的提醒,"上拉加载更多" -
[fail]String optional上拉加载失败提醒,"点击重新加载" -
[last]String optional最后一页的提醒,"没有更多内容" -
[nodata]String optional没有数据的提醒,"没有更多内容"
-
-
Example:
html:
<div id="scrollList" 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: {},
// 如果返回的数组字段不在data,通过field重新定义
field: {
page: "page",
size: "pageSize",
data: "data"
},
template: function (data) {
var html = "";
data.forEach(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;
}
})