bui.scroll Class

Defined in: src/scripts/ui/bui.scroll.js:10

Module: UI

滚动控件

上拉加载,下拉刷新

可以自由定义上拉事件,下拉事件,如果无特殊要求,推荐使用 bui.list

预览地址: demo

方法说明:

refresh: 触发下拉的方法
reverse: 还原位置,下拉请求完数据以后,需要还原位置
load: 触发加载某一页数据
nextPage: 触发加载下一页数据
prevPage: 触发加载上一页数据
filter: 过滤数据
fail: 请求失败以后,可以变为点击加载
updatePage: 更新分页及缓存
bui.scroll/isRefresh: 获取当前是刷新状态还是加载

内容交互方法

lock: 不允许滚动加载
unlock: 允许滚动加载
setHeight: 设置内容滚动高度
to: 滚动条跳转到第几个元素
toBottom: 跳到底部
scrollTop: 滚动多少px

公共方法

option: 获取设置参数
widget: 获取依赖控件

Constructor

`bui.scroll`

(

[option]

)

Defined in src/scripts/ui/bui.scroll.js:10

Parameters:

[option] Object optional
- id String
  
  控件的ID,需要满足固定的结构
- [uid] String optional
  
  1.6.6新增，实例的自定义唯一名字，用于命令式调用
- [children] String optional
  
  列表的样式不能为空, 找到要循环遍历的元素的父层例如 .bui-list
- [handle] String optional
  
  默认li, 找到要循环遍历的元素
- [lastUpdated] Bollean optional
  
  下拉的文本提醒是否显示时间
- [distance] Number optional
  
  默认100，下拉的距离大于这个数才会触发
- [backDistance] Number optional
  
  默认50，下拉回去的距离 1.8.0新增
- [maxDistance] Number optional
  
  1.4.2新增默认0,下拉的距离超过最大值自动触发返回
- stopHandle String
  
  1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] 无法滑动的时候
- [height] Number optional
  
  列表的高度,默认适应，如果高度不对，自行计算后传给列表即可。
- [page] Number optional
  
  请求的页数,默认为1
- [pageSize] Number optional
  
  每页的大小,默认为10
- [autoRefresh] Boolean optional
  
  默认false 自动刷新
- [autoNext] Boolean optional
  
  默认true 当高度不足时,会继续请求下一页,直到高度出现滚动条
- [cacheHeight] Boolean optional
  
  1.6.2新增, 默认 true | false 使用缓存的高度计算,false 则动态获取页面高度计算
- [refresh] Boolean optional
  
  允许下拉刷新, 默认true | false
- [handleMove] String optional
  
  1.6.3 默认 "main" || "head", 下拉的时候一起拖动的位置, 数据量较多建议选择head
- [direction] String optional
  
  1.5.6新增滚动的方向,默认 y || x ;
- [refreshPage] String optional
  
  1.5.6新增刷新的时候是否把分页page重置为1;
- [loading] Object optional
  
  1.8.0 loading的配置
- [scroll] Boolean optional
  
  1.5.6新增默认true(绑定滚动事件) | false
- [autoScroll] Boolean optional
  
  默认true 滚动到底部触发, false 自己监听
- [onBeforeRefresh] Function optional
  
  1.5.2新增, 刷新前执行
- [onBeforeLoad] Function optional
  
  1.5.2新增, 加载前执行
- [onRefresh] Function optional
  
  下拉以后执行
- [onLoad] Function optional
  
  滚动加载后执行回调,在数据渲染后
- [delayTime] Number optional
  
  默认 100，滚动结束后才触发onScrolling 0 则实时触发onScrolling
- [onScrolling] Function optional
  
  滚动时触发
- [onBeforeInit] Function optional
  
  1.5.1新增初始化前触发
- [onInited] Function optional
  
  1.5.1新增初始化以后触发
- [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="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);
                                               })
                                           }

Index
Methods
Events

Item Index

Methods

destroy
disable
enable
fail
filter
getPage
init
last
load
lock
lockrefresh
nextPage
option
prevPage
refresh
reload
resize
reverse
scrollTop
setHeight
status
to
toBottom
unlock
unlockrefresh
updatePage
widget

Events

Methods

`destroy`

(

[bool]

)

Defined in src/scripts/ui/bui.scroll.js:1143

Available since 1.4.2

[销毁控件]

Parameters:

[bool] Boolean optional

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

Example:

       //销毁
                                                       uiScroll.destroy();

`disable`

()

Defined in src/scripts/ui/bui.scroll.js:1172

Available since 1.8.6

禁止滚动

Example:

`enable`

()

Defined in src/scripts/ui/bui.scroll.js:1185

Available since 1.8.6

允许滚动

Example:

`fail`

(

[start]
[count]

)

chainable

Defined in src/scripts/ui/bui.scroll.js:738

失败点击可以重新加载当前页

Parameters:

[start] Number optional

第几页
[count] Number optional

每页多少条

Example:

       //回调里面触发 uiScroll基于顶部例子
                                                       uiScroll.fail();

`filter`

(

keyword
key

)

Array

Defined in src/scripts/ui/bui.scroll.js:773

数据过滤,用于已有缓存过滤

Parameters:

keyword String

关键字
key String

在哪个字段

Returns:

Array:

[返回符合条件的数据]

Example:

       //过滤数据中的phone字段,是否含有139224这个数据
                                                       var filterData = uiScroll.filter("139224","phone");

`getPage`

() chainable

Defined in src/scripts/ui/bui.scroll.js:578

Available since 1.5.3

获取当前在第几页

Returns:

[object] 返回 page

Example:

       // 获取当前在第几页
                                                       var currentPage = uiScroll.getPage();

`init`

(

[option]

)

chainable

Defined in src/scripts/ui/bui.scroll.js:304

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

Parameters:

[option] Object optional

参数控件本身

`last`

()

Defined in src/scripts/ui/bui.scroll.js:1198

Available since 1.8.6

手动处理最后一页

Example:

`load`

() chainable

Defined in src/scripts/ui/bui.scroll.js:1057

手动加载更多数据

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.load();

`lock`

() chainable

Defined in src/scripts/ui/bui.scroll.js:943

不允许滚动加载

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.lock();

`lockrefresh`

() chainable

Defined in src/scripts/ui/bui.scroll.js:962

Available since 1.6.3

不允许下拉刷新

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.lockrefresh();

`nextPage`

() chainable

Defined in src/scripts/ui/bui.scroll.js:1075

加载下一页数据

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.nextPage();

`option`

(

[key]
[value]

)

chainable

Defined in src/scripts/ui/bui.scroll.js:1236

获取设置参数

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

Defined in src/scripts/ui/bui.scroll.js:1089

加载上一页数据

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.prevPage();

`refresh`

() chainable

Defined in src/scripts/ui/bui.scroll.js:1018

手动执行刷新数据

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.refresh();

`reload`

() chainable

Defined in src/scripts/ui/bui.scroll.js:1037

Available since 1.7.6

刷新数据无动画

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.reload();

`resize`

(

[option]

)

chainable

Defined in src/scripts/ui/bui.scroll.js:1108

Available since 1.5.3

重新计算高度

Parameters:

[option] Object optional

可以不传
- [width] Number optional
  
  如果不传则自动计算
- [height] Number optional
  
  如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算

Example:

      //重新计算高度
                                                      uiScroll.resize();

`reverse`

(

[callback]

)

chainable

Defined in src/scripts/ui/bui.scroll.js:702

返回原位

Parameters:

[callback] Function optional

回调

Example:

       //回调里面触发 uiScroll基于顶部例子
                                                       uiScroll.reverse();

`scrollTop`

(

[num]

)

chainable

Defined in src/scripts/ui/bui.scroll.js:868

Available since 1.4.3

跳到指定的滚动高度值

Parameters:

[num] Number | Object optional

非必须,默认:0

Example:

       uiScroll.scrollTop(2);

`setHeight`

(

[height]

)

chainable

Defined in src/scripts/ui/bui.scroll.js:895

设置滚动的高度,常用于$(window).resize(fun)

Parameters:

[height] Number | String optional

设置的高度

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.setHeight(300);

`status`

() chainable

Defined in src/scripts/ui/bui.scroll.js:921

Available since 1.8.0

修改status属性

Example:

       uiScroll.status("start");

`to`

(

index
callback

)

chainable

Defined in src/scripts/ui/bui.scroll.js:808

跳到指定元素

Parameters:

index Number

内容的索引,例如第3个li 则 index=2
callback Function

跳转后执行

Example:

       uiScroll.to(2);

`toBottom`

(

callback

)

chainable

Defined in src/scripts/ui/bui.scroll.js:845

跳到底部

Parameters:

callback Function

跳转后执行

Example:

       uiScroll.toBottom();

`unlock`

() chainable

Defined in src/scripts/ui/bui.scroll.js:998

允许滚动加载

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.unlock();

`unlockrefresh`

() chainable

Defined in src/scripts/ui/bui.scroll.js:980

Available since 1.6.3

不允许下拉刷新

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.unlockrefresh();

`updatePage`

(

start
data

)

chainable

Defined in src/scripts/ui/bui.scroll.js:594

更新请求的分页及缓存,并继续请求下一页, 旧接口~~updateCache~~不再使用.

Parameters:

start String

[当前分页]
data Object

[当前数据]

Example:

       //回调里面触发 uiScroll基于顶部例子
                                                       uiScroll.updatePage(2,data);

`widget`

(

[name]

)

Defined in src/scripts/ui/bui.scroll.js:1218

获取依赖的控件

Parameters:

[name] String optional

依赖控件名 pullrefresh loading

Example:

       //获取依赖控件
                                                       var uiScrollWidget = uiScroll.widget();

Events

`off`

Defined in src/scripts/ui/bui.scroll.js:1283

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] String optional

事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部)
[callback] Function optional

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

Example:

       uiScroll.off("scrollend");

`on`

Defined in src/scripts/ui/bui.scroll.js:1263

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] String optional

事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部)
[callback] Function optional

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

Example:

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

BUI

bui.scroll Class

滚动控件

预览地址: demo

方法说明:

内容交互方法

公共方法

Constructor

bui.scroll

Parameters:

Example:

Item Index

Methods

Events

Methods

destroy

Parameters:

Example:

disable

Example:

enable

Example:

fail

Parameters:

Example:

filter

Parameters:

Returns:

Example:

getPage

Returns:

Example:

init

Parameters:

last

Example:

load

Example:

lock

Example:

lockrefresh

Example:

nextPage

Example:

option

Parameters:

Example:

prevPage

Example:

refresh

Example:

reload

Example:

resize

Parameters:

Example:

reverse

Parameters:

Example:

scrollTop

Parameters:

Example:

setHeight

Parameters:

Example:

status

Example:

to

Parameters:

Example:

toBottom

Parameters:

Example:

unlock

Example:

unlockrefresh

Example:

updatePage

Parameters:

Example:

`bui.scroll`

`destroy`

`disable`

`enable`

`fail`

`filter`

`getPage`

`init`

`last`

`load`

`lock`

`lockrefresh`

`nextPage`

`option`

`prevPage`

`refresh`

`reload`

`resize`

`reverse`

`scrollTop`

`setHeight`

`status`

`to`

`toBottom`

`unlock`

`unlockrefresh`

`updatePage`

`widget`

`off`

`on`