bui.pullrefresh Class

Defined in: src/scripts/ui/bui.pullrefresh.js:9

Module: UI

下拉刷新控件

可以自由定义下拉事件

预览地址: demo

方法说明:

reverse: 还原位置,下拉请求完数据以后,需要还原位置
fail: 请求失败以后,可以变为点击加载
refresh: 手动刷新数据
option: 获取设置参数
widget: 获取依赖控件

内容交互

lock: 锁住滑动,一般用于控件冲突
unlock: 解锁滑动,一般用于控件冲突
setHeight: 设置内容滚动高度

Constructor

`bui.pullrefresh`

(

[option]

)

Defined in src/scripts/ui/bui.pullrefresh.js:9

Parameters:

[option] Object optional
- [id] String optional
  
  控件的ID,需要满足固定的结构
- [uid] String optional
  
  1.6.6新增，实例的自定义唯一名字，用于命令式调用
- [autoLoad] Boolean optional
  
  是否第一次先执行加载 true | false
- [lastUpdated] Boolean optional
  
  是否显示更新的时间提醒
- [distance] Number optional
  
  默认100,下拉的距离超过才会触发事件
- [backDistance] Number optional
  
  默认50,下拉后回去的停留距离 1.8.0新增
- [handleMove] String optional
  
  1.6.3 默认 "main" || "head", 下拉的时候一起拖动的位置, 数据量较多建议选择head
- [maxDistance] Number optional
  
  1.4.2新增默认0,下拉的距离超过最大值自动触发事件并返回
- stopHandle String
  
  1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] 无法滑动的时候
- [stopPropagation] Boolean optional
  
  1.5.5新增, 默认 false | true 阻止触发外部滑动
- [height] Boolean optional
  
  列表的高度,默认适应，如果高度不对，自行计算后传给列表即可。
- [cacheHeight] Boolean optional
  
  1.6.2新增, 默认 true | false 使用缓存的高度计算,false 则动态获取页面高度计算
- [loading] Object optional
  
  1.8.0 loading的配置
- [onRefresh] Function optional
  
  上拉以后执行
- [onBeforeRefresh] Function optional
  
  1.5.2新增, 刷新前执行
- [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
    成功提醒

Example:

html:
                                           <div id="scroll" class="bui-scroll">
                                                <div class="bui-scroll-head"></div>
                                                <div class="bui-scroll-main">
                                                    <ul class="bui-list">
                                                        <li class="bui-btn">这里是循环的内容</li>
                                                    </ul>
                                                </div>
                                                <div class="bui-scroll-foot"></div>
                                            </div>
                                    js:
                                           // 初始化
                                            var uiPullRefresh = bui.pullrefresh({
                                                id: "#scroll",
                                                onRefresh: getData
                                            })
                                           //数据请求示例
                                            var start = 1;
                                            var pagesize = 4;
                                            function getData (start,pagesize) {
                                                var _self = this;
                                                bui.ajax({
                                                    url: "http://localhost/mysite/yumeng/index.php/API/Usercenter/getUserList",
                                                    data: {
                                                        pageindex:start,
                                                        pagesize:pagesize
                                                    }
                                                }).done(function(res) {
                                                   console.log(res);
                                                   //请求成功以后还原位置
                                                    uiPullRefresh.reverse();
                                               }).fail(function (res) {
                                                    //请求失败以后改为点击加载
                                                    uiPullRefresh.fail();
                                               })
                                            }

Index
Methods
Events

Item Index

Events

Methods

`destroy`

(

[bool]

)

Defined in src/scripts/ui/bui.pullrefresh.js:1046

Available since 1.4.2

[销毁控件]

Parameters:

[bool] Boolean optional

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

Example:

       //销毁
                                                       uiPullRefresh.destroy();

`fail`

(

[option]

)

chainable

Defined in src/scripts/ui/bui.pullrefresh.js:923

请求失败改为点击加载,一般在请求的fail里面

Parameters:

[option] Object optional

Example:

       //uiPullRefresh基于顶部例子
                                                       uiPullRefresh.fail();

`init`

(

[option]

)

chainable

Defined in src/scripts/ui/bui.pullrefresh.js:216

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

Parameters:

[option] Object optional

参数控件本身

`lock`

(

[callback]

)

chainable

Defined in src/scripts/ui/bui.pullrefresh.js:732

锁住拖动刷新,跟unlock配合使用

Parameters:

[callback] Function optional

回调

Example:

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

`option`

(

[key]
[value]

)

chainable

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

获取设置参数

Parameters:

[key] String | object optional

不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数
[value] String | number | boolean | function optional

设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传

Example:

       //获取所有参数
                                                        //获取所有参数
                                                       var option = uiPullRefresh.option();
                                                
                                                       //获取某个参数
                                                       var id = uiPullRefresh.option( "id" );
                                                
                                                       //修改一个参数
                                                       uiPullRefresh.option( "lastUpdated",false );
                                                
                                                       //修改多个参数
                                                       uiPullRefresh.option( {"lastUpdated":false} );

`refresh`

() chainable

Defined in src/scripts/ui/bui.pullrefresh.js:947

手动刷新数据，带动画

Example:

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

`reload`

() chainable

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

手动刷新数据无动画

Example:

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

`resize`

(

[option]

)

chainable

Defined in src/scripts/ui/bui.pullrefresh.js:1013

Available since 1.5.3

重新计算高度

Parameters:

[option] Object optional

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

Example:

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

`reverse`

(

[num]
[bool]
[callback]

)

chainable

Defined in src/scripts/ui/bui.pullrefresh.js:806

返回原位

Parameters:

[num] Number optional

数字
[bool] Boolean optional

是否使用动画 true | false
[callback] Function optional

回调

Example:

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

`setHeight`

(

[height]

)

chainable

Defined in src/scripts/ui/bui.pullrefresh.js:988

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

Parameters:

[height] Number | String optional

设置的高度

Example:

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

`status`

() chainable

Defined in src/scripts/ui/bui.pullrefresh.js:316

Available since 1.8.0

修改status属性

Example:

       uiPullrefresh.status("start");

`unlock`

(

[callback]

)

chainable

Defined in src/scripts/ui/bui.pullrefresh.js:766

绑定拖动刷新,跟lock配合使用

Parameters:

[callback] Function optional

回调

Example:

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

`widget`

(

[name]

)

Defined in src/scripts/ui/bui.pullrefresh.js:1072

获取依赖的控件

Parameters:

[name] String optional

依赖控件名 loading

Example:

       //获取依赖控件
                                                       var uiPullRefreshWidget = uiPullRefresh.widget();

Events

`off`

Defined in src/scripts/ui/bui.pullrefresh.js:1137

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] String optional

事件类型: "refresh"(刷新时) | "swipedown"(往下滑) | "movingdown"(往下滑移动实时)
[callback] Function optional

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

Example:

       uiPullrefresh.off("refresh");

`on`

Defined in src/scripts/ui/bui.pullrefresh.js:1117

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] String optional

事件类型: "refresh"(刷新时) | "swipedown"(往下滑) | "movingdown"(往下滑移动实时)
[callback] Function optional

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

Example:

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

BUI

bui.pullrefresh Class

下拉刷新控件

预览地址: demo

方法说明:

内容交互

Constructor

bui.pullrefresh

Parameters:

Example:

Item Index

Methods

Events

Methods

destroy

Parameters:

Example:

fail

Parameters:

Example:

init

Parameters:

lock

Parameters:

Example:

option

Parameters:

Example:

refresh

Example:

reload

Example:

resize

Parameters:

Example:

reverse

Parameters:

Example:

setHeight

Parameters:

Example:

status

Example:

unlock

Parameters:

Example:

widget

Parameters:

Example:

Events

off

Event Payload:

Example:

on

Event Payload:

Example:

`bui.pullrefresh`

`destroy`

`fail`

`init`

`lock`

`option`

`refresh`

`reload`

`resize`

`reverse`

`setHeight`

`status`

`unlock`

`widget`

`off`

`on`