Show:

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();
                                               })
                                            }

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);
                                                       });