bui.scroll Class
滚动控件
上拉加载,下拉刷新
可以自由定义上拉事件,下拉事件,如果无特殊要求,推荐使用 bui.list
预览地址: demo
方法说明:
refresh: 触发下拉的方法reverse: 还原位置,下拉请求完数据以后,需要还原位置
load: 触发加载某一页数据
nextPage: 触发加载下一页数据
prevPage: 触发加载上一页数据
filter: 过滤数据
fail: 请求失败以后,可以变为点击加载
updatePage: 更新分页及缓存
bui.scroll/isRefresh: 获取当前是刷新状态还是加载
内容交互方法
lock: 不允许滚动加载unlock: 允许滚动加载
setHeight: 设置内容滚动高度
to: 滚动条跳转到第几个元素
公共方法
option: 获取设置参数widget: 获取依赖控件
Constructor
bui.scroll
-
[option]
Parameters:
-
[option]Object optional-
idString[ 控件的ID,需要满足固定的结构 ]
-
childrenString[ 列表的样式不能为空, 找到要循环遍历的元素的父层 例如 .bui-list ]
-
handleString[ 默认li, 找到要循环遍历的元素 ]
-
lastUpdatedBollean[ 下拉的文本提醒是否显示时间 ]
-
distanceNumber[ 下拉的距离大于这个数才会触发 ]
-
maxDistanceNumber[ 1.4.2新增 默认0,下拉的距离超过最大值自动触发返回 ]
-
stopHandleString[ 1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] 无法滑动的时候 ]
-
heightNumber[ 为0时,自适应高度 ]
-
pageNumber[ 请求的页数,默认为1 ]
-
pageSizeNumber[ 每页的大小,默认为10 ]
-
autoRefreshBoolean[ 默认false 自动刷新 ]
-
autoNextBoolean[ 默认true 当高度不足时,会继续请求下一页,直到高度出现滚动条 ]
-
refreshBoolean[ 允许下拉刷新, 默认true | false ]
-
autoScrollBoolean[ 默认true 滚动到底部触发, false 自己监听 ]
-
onRefreshFunction[ 下拉以后执行 ]
-
onLoadFunction[ 上拉到底部执行 ]
-
onScrollingFunction[ 滚动时触发 ]
-
refreshTipsObject-
startString[ 开始加载的文本提醒,"刷新中.." ] -
releaseString[ 下拉的文本提醒,"松开刷新" ] -
endString[ 下拉高度不足提醒,"下拉刷新" ] -
failString[ 下拉加载失败提醒,"点击加载" ] -
successString[ 成功提醒,"刷新成功" ]
-
-
scrollTipsObject-
startString[ 开始加载的文本提醒,"努力加载中.." ] -
endString[ 上拉加载的提醒,"上拉加载更多" ] -
failString[ 上拉加载失败提醒,"点击重新加载" ] -
lastString[ 最后一页的提醒,"没有更多内容" ] -
nodataString[ 没有数据的提醒,"没有更多内容" ]
-
-
Example:
html:
<div id="scroll" class="bui-scroll">
<div class="bui-scroll-head"></div>
<div class="bui-scroll-main">
<ul id="scrollList" class="bui-list">
<li class="bui-btn">这里是循环的内容</li>
</ul>
</div>
<div class="bui-scroll-foot"></div>
</div>js:
// 初始化
var uiScroll = bui.scroll({
id: "#scroll",
children: ".bui-list",
page:1,
pageSize:10,
onRefresh: refresh,
onLoad: getData
})
//刷新数据
function refresh () {
page = 1;
pagesize = 10;
//请求数据
getData(page,pagesize,"html");
}
//滚动加载下一页
function getData (page,pagesize,command) {
command = command || "append";
bui.ajax({
url: "http://localhost/mysite/yumeng/index.php/API/Usercenter/getUserList",
data: {
pageindex:page,
pagesize:pagesize
}
}).done(function(res) {
var data = JSON.parse(res);//有可能需要转换,视接口而定
//生成html
var html = "";
//数据渲染
//渲染数据
$("#scrollList")[command](html);
//更新分页信息
uiScroll.updatePage(start,res.data);
//还原位置
uiScroll.reverse();
}).fail(function (res) {
// 可以点击重新加载
uiScroll.fail(start,pagesize,res);
})
}Item Index
Methods
Methods
destroy
-
[bool]
[销毁控件]
Parameters:
-
[bool]Boolean optional[ 默认: false 销毁部分 | true 销毁全部 ]
Example:
//销毁
uiScroll.destroy();fail
-
[start] -
[count]
失败点击可以重新加载当前页
Parameters:
-
[start]Number optional第几页
-
[count]Number optional每页多少条
Example:
//回调里面触发 uiScroll基于顶部例子
uiScroll.fail();filter
-
keyword -
key
数据过滤,用于已有缓存过滤
Parameters:
-
keywordString关键字
-
keyString在哪个字段
Returns:
[返回符合条件的数据]
Example:
//过滤数据中的phone字段,是否含有139224这个数据
var filterData = uiScroll.filter("139224","phone");init
-
[option]
初始化方法,用于重新初始化结构,事件只初始化一次
Parameters:
-
[option]Object optional[参数控件本身]
load
()
chainable
手动加载更多数据
Example:
//uiScroll基于顶部例子
uiScroll.load();lock
()
chainable
不允许滚动加载
Example:
//uiScroll基于顶部例子
uiScroll.lock();nextPage
()
chainable
加载下一页数据
Example:
//uiScroll基于顶部例子
uiScroll.nextPage();option
-
[key] -
[value]
获取设置参数
Parameters:
-
[key]String | object optional[ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数 ]
-
[value]String | number | boolean | function optional[ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传 ]
Example:
//获取所有参数
//获取所有参数
var option = uiScroll.option();
//获取某个参数
var id = uiScroll.option( "id" );
//修改一个参数
uiScroll.option( "distance",100 );
//修改多个参数
uiScroll.option( {"distance":100} );prevPage
()
chainable
加载上一页数据
Example:
//uiScroll基于顶部例子
uiScroll.prevPage();refresh
()
chainable
手动执行刷新数据
Example:
//uiScroll基于顶部例子
uiScroll.refresh();reverse
-
[callback]
返回原位
Parameters:
-
[callback]Function optional回调
Example:
//回调里面触发 uiScroll基于顶部例子
uiScroll.reverse();scrollTop
-
[num]
跳到指定的滚动高度值
Parameters:
-
[num]Number | Object optional[ 非必须,默认:0 ]
Example:
uiScroll.scrollTop(2);setHeight
-
[height]
设置滚动的高度,常用于$(window).resize(fun)
Parameters:
-
[height]Number | String optional设置的高度
Example:
//uiScroll基于顶部例子
uiScroll.setHeight(300);to
-
index -
callback
跳到指定元素
Parameters:
-
indexNumber内容的索引,例如第3个li 则 index=2
-
callbackFunction跳转后执行
Example:
uiScroll.to(2);unlock
()
chainable
允许滚动加载
Example:
//uiScroll基于顶部例子
uiScroll.unlock();updatePage
-
start -
data
更新请求的分页及缓存,并继续请求下一页, 旧接口updateCache不再使用.
Parameters:
-
startString[当前分页]
-
dataObject[当前数据]
Example:
//回调里面触发 uiScroll基于顶部例子
uiScroll.updatePage(2,data);widget
-
[name]
获取依赖的控件
Parameters:
-
[name]String optional[ 依赖控件名 pullrefresh loading ]
Example:
//获取依赖控件
var uiScrollWidget = uiScroll.widget();Events
off
为控件取消绑定事件
Event Payload:
-
[type]String optional[ 事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部) ]
-
[callback]Function optional[ 绑定的事件, this 为当前点击的菜单 ]
Example:
uiScroll.off("scrollend");on
为控件绑定事件
Event Payload:
-
[type]String optional[ 事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部) ]
-
[callback]Function optional[ 绑定的事件, this 为当前点击的菜单 ]
Example:
uiScroll.on("scrollend",function () {
// 点击的菜单
console.log(this);
});