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
  
  下拉的距离大于这个数才会触发
- [maxDistance] Number optional
  
  1.4.2新增默认0,下拉的距离超过最大值自动触发返回
- [stopHandle] 1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] String optional
  
  无法滑动的时候
- [height] Number optional
  
  为0时,自适应高度
- [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;
- [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
  
  滚动加载后执行回调,在数据渲染后
- [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
fail
filter
getPage
init
load
lock
lockrefresh
nextPage
option
prevPage
refresh
resize
reverse
scrollTop
setHeight
to
toBottom
unlock
unlockrefresh
updatePage
widget

Events

Methods

`destroy`

(

[bool]

)

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

Available since 1.4.2

[销毁控件]

Parameters:

[bool] Boolean optional

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

Example:

       //销毁
                                                       uiScroll.destroy();

`fail`

(

[start]
[count]

)

chainable

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

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

Parameters:

[start] Number optional

第几页
[count] Number optional

每页多少条

Example:

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

`filter`

(

keyword
key

)

Array

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

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

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:530

Available since 1.5.3

获取当前在第几页

Returns:

[object] 返回 page

Example:

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

`init`

(

[option]

)

chainable

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

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

Parameters:

[option] Object optional

参数控件本身

`load`

() chainable

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

手动加载更多数据

Example:

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

`lock`

() chainable

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

不允许滚动加载

Example:

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

`lockrefresh`

() chainable

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

Available since 1.6.3

不允许下拉刷新

Example:

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

`nextPage`

() chainable

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

加载下一页数据

Example:

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

`option`

(

[key]
[value]

)

chainable

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

获取设置参数

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:1004

加载上一页数据

Example:

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

`refresh`

() chainable

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

手动执行刷新数据

Example:

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

`resize`

(

[option]

)

chainable

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

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:651

返回原位

Parameters:

[callback] Function optional

回调

Example:

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

`scrollTop`

(

[num]

)

chainable

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

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:843

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

Parameters:

[height] Number | String optional

设置的高度

Example:

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

`to`

(

index
callback

)

chainable

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

跳到指定元素

Parameters:

index Number

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

跳转后执行

Example:

       uiScroll.to(2);

`toBottom`

(

callback

)

chainable

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

跳到底部

Parameters:

callback Function

跳转后执行

Example:

       uiScroll.toBottom();

`unlock`

() chainable

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

允许滚动加载

Example:

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

`unlockrefresh`

() chainable

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

Available since 1.6.3

不允许下拉刷新

Example:

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

`updatePage`

(

start
data

)

chainable

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

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

Parameters:

start String

[当前分页]
data Object

[当前数据]

Example:

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

`widget`

(

[name]

)

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

获取依赖的控件

Parameters:

[name] String optional

依赖控件名 pullrefresh loading

Example:

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

Events

`off`

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

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:1132

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:

fail

Parameters:

Example:

filter

Parameters:

Returns:

Example:

getPage

Returns:

Example:

init

Parameters:

load

Example:

lock

Example:

lockrefresh

Example:

nextPage

Example:

option

Parameters:

Example:

prevPage

Example:

refresh

Example:

resize

Parameters:

Example:

reverse

Parameters:

Example:

scrollTop

Parameters:

Example:

setHeight

Parameters:

Example:

to

Parameters:

Example:

toBottom

Parameters:

Example:

unlock

Example:

unlockrefresh

Example:

updatePage

Parameters:

Example:

widget

Parameters:

Example:

Events

off

Event Payload:

Example:

on

Event Payload:

Example:

`bui.scroll`

`destroy`

`fail`

`filter`

`getPage`

`init`

`load`

`lock`

`lockrefresh`

`nextPage`

`option`

`prevPage`

`refresh`

`resize`

`reverse`

`scrollTop`

`setHeight`

`to`

`toBottom`

`unlock`

`unlockrefresh`

`updatePage`

`widget`

`off`

`on`