BUI

其它版本:

API for BUI 1.5.1

Show:

bui.scroll Class

滚动控件

上拉加载,下拉刷新

可以自由定义上拉事件,下拉事件,如果无特殊要求,推荐使用 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]
)

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 当高度不足时,会继续请求下一页,直到高度出现滚动条 ]

    • refresh Boolean

      [ 允许下拉刷新, 默认true | false ]

    • autoScroll Boolean

      [ 默认true 滚动到底部触发, false 自己监听 ]

    • onRefresh Function

      [ 下拉以后执行 ]

    • onLoad Function

      [ 上拉到底部执行 ]

    • onScrolling Function

      [ 滚动时触发 ]

    • [onBeforeInit] Function optional

      [ 1.5.1新增 初始化前触发 ]

    • [onInited] Function optional

      [ 1.5.1新增 初始化以后触发 ]

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

Methods

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
       uiScroll.destroy();

fail

(
  • [start]
  • [count]
)
chainable

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

Parameters:

  • [start] Number optional

    第几页

  • [count] Number optional

    每页多少条

Example:

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

filter

(
  • keyword
  • key
)
Array

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

Parameters:

  • keyword String

    关键字

  • key String

    在哪个字段

Returns:

Array:

[返回符合条件的数据]

Example:

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

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    [参数控件本身]

load

() chainable

手动加载更多数据

Example:

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

lock

() chainable

不允许滚动加载

Example:

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

nextPage

() chainable

加载下一页数据

Example:

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

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

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

加载上一页数据

Example:

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

refresh

() chainable

手动执行刷新数据

Example:

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

reverse

(
  • [callback]
)
chainable

返回原位

Parameters:

  • [callback] Function optional

    回调

Example:

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

scrollTop

(
  • [num]
)
chainable

跳到指定的滚动高度值

Parameters:

  • [num] Number | Object optional

    [ 非必须,默认:0 ]

Example:

       uiScroll.scrollTop(2);

setHeight

(
  • [height]
)
chainable

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

Parameters:

  • [height] Number | String optional

    设置的高度

Example:

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

to

(
  • index
  • callback
)
chainable

跳到指定元素

Parameters:

  • index Number

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

  • callback Function

    跳转后执行

Example:

       uiScroll.to(2);

toBottom

(
  • callback
)
chainable

跳到底部

Parameters:

  • callback Function

    跳转后执行

Example:

       uiScroll.toBottom();

unlock

() chainable

允许滚动加载

Example:

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

updatePage

(
  • start
  • data
)
chainable

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

Parameters:

  • start String

    [当前分页]

  • data Object

    [当前数据]

Example:

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

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 pullrefresh loading ]

Example:

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

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

       uiScroll.off("scrollend");

on

为控件绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

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