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,需要满足固定的结构 ]
- children String
  
  [ 列表的样式不能为空, 找到要循环遍历的元素的父层例如 .bui-list ]
- handle String
  
  [ 默认li, 找到要循环遍历的元素 ]
- lastUpdated Bollean
  
  [ 下拉的文本提醒是否显示时间 ]
- distance Number
  
  [ 下拉的距离大于这个数才会触发 ]
- maxDistance Number
  
  [ 1.4.2新增默认0,下拉的距离超过最大值自动触发返回 ]
- stopHandle String
  
  [ 1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] 无法滑动的时候 ]
- height Number
  
  [ 为0时,自适应高度 ]
- page Number
  
  [ 请求的页数,默认为1 ]
- pageSize Number
  
  [ 每页的大小,默认为10 ]
- autoRefresh Boolean
  
  [ 默认false 自动刷新 ]
- autoNext Boolean
  
  [ 默认true 当高度不足时,会继续请求下一页,直到高度出现滚动条 ]
- cacheHeight Boolean
  
  [ 1.6.2新增, 默认 true | false 使用缓存的高度计算,false 则动态获取页面高度计算 ]
- refresh Boolean
  
  [ 允许下拉刷新, 默认true | false ]
- handleMove String
  
  [ 1.6.3 默认 "main" || "head", 下拉的时候一起拖动的位置, 数据量较多建议选择head ]
- [direction] [1.5.6新增滚动的方向,默认 y || x ;] String optional
- [refreshPage] [1.5.6新增刷新的时候是否把分页page重置为1;] String optional
- scroll Boolean
  
  [ 1.5.6新增默认true(绑定滚动事件) | false ]
- autoScroll Boolean
  
  [ 默认true 滚动到底部触发, false 自己监听 ]
- [onBeforeRefresh] [ 1.5.2新增, 刷新前执行] Function optional
- [onBeforeLoad] [ 1.5.2新增, 加载前执行] Function optional
- onRefresh Function
  
  [ 下拉以后执行 ]
- onLoad Function
  
  [ 滚动加载后执行回调,在数据渲染后 ]
- onScrolling Function
  
  [ 滚动时触发 ]
- [onBeforeInit] [ 1.5.1新增初始化前触发] Function optional
- [onInited] [ 1.5.1新增初始化以后触发] Function optional
- refreshTips Object
  - start String
    [ 开始加载的文本提醒,"刷新中.." ]
  - release String
    [ 下拉的文本提醒,"松开刷新" ]
  - end String
    [ 下拉高度不足提醒,"下拉刷新" ]
  - fail String
    [ 下拉加载失败提醒,"点击加载" ]
  - success String
    [ 成功提醒,"刷新成功" ]
- scrollTips Object
  - start String
    [ 开始加载的文本提醒,"努力加载中.." ]
  - end String
    [ 上拉加载的提醒,"上拉加载更多" ]
  - fail String
    [ 上拉加载失败提醒,"点击重新加载" ]
  - last String
    [ 最后一页的提醒,"没有更多内容" ]
  - nodata String
    [ 没有数据的提醒,"没有更多内容" ]

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] [ 默认: false 销毁部分 | true 销毁全部]

)

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

Available since 1.4.2

[销毁控件]

Parameters:

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

Example:

       //销毁
                                                   uiScroll.destroy();

`fail`

(

[start]
[count]

)

chainable

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

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

Parameters:

[start] Number optional

第几页
[count] Number optional

每页多少条

Example:

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

`filter`

(

keyword
key

)

Array

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

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

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

Available since 1.5.3

获取当前在第几页

Returns:

[object] [ 返回 page ]

Example:

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

`init`

(

[option] [参数控件本身]

)

chainable

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

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

Parameters:

[option] [参数控件本身] Object optional

`load`

() chainable

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

手动加载更多数据

Example:

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

`lock`

() chainable

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

不允许滚动加载

Example:

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

`lockrefresh`

() chainable

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

Available since 1.6.3

不允许下拉刷新

Example:

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

`nextPage`

() chainable

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

加载下一页数据

Example:

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

`option`

(

[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]

)

chainable

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

获取设置参数

Parameters:

[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] String | object optional
[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:988

加载上一页数据

Example:

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

`refresh`

() chainable

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

手动执行刷新数据

Example:

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

`resize`

(

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

)

chainable

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

Available since 1.5.3

重新计算高度

Parameters:

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

Example:

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

`reverse`

(

[callback]

)

chainable

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

返回原位

Parameters:

[callback] Function optional

回调

Example:

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

`scrollTop`

(

[num] [ 非必须,默认:0]

)

chainable

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

Available since 1.4.3

跳到指定的滚动高度值

Parameters:

[num] [ 非必须,默认:0] Number | Object optional

Example:

       uiScroll.scrollTop(2);

`setHeight`

(

[height]

)

chainable

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

设置滚动的高度,常用于$(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:740

跳到指定元素

Parameters:

index Number

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

跳转后执行

Example:

       uiScroll.to(2);

`toBottom`

(

callback

)

chainable

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

跳到底部

Parameters:

callback Function

跳转后执行

Example:

       uiScroll.toBottom();

`unlock`

() chainable

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

允许滚动加载

Example:

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

`unlockrefresh`

() chainable

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

Available since 1.6.3

不允许下拉刷新

Example:

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

`updatePage`

(

start
data

)

chainable

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

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

Parameters:

start String

[当前分页]
data Object

[当前数据]

Example:

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

`widget`

(

[name] [ 依赖控件名 pullrefresh loading]

)

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

获取依赖的控件

Parameters:

[name] [ 依赖控件名 pullrefresh loading] String optional

Example:

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

Events

`off`

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

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] [ 事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部)] String optional
[callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

       uiScroll.off("scrollend");

`on`

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

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] [ 事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部)] String optional
[callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

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`