BUI

其它版本:

API for BUI 1.6.x

Show:

bui.listview Class

Module: UI

侧滑列表

支持动态渲染以及静态渲染, 两种的区别就在于,动态渲染初始化简单, 静态渲染灵活,支持自定义按钮样式,并且支持左右侧滑.

可以同时有左边跟右边菜单,菜单的个数也可以不一样多,留意示例的几种不同效果

预览地址: demo

方法说明:

active: 返回当前激活的对象
bui.listview/open: 打开某一个
close: 关闭所有
lock: 不允许滑动
unlock: 允许滑动
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.listview

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • data Array

      点击触发侧滑的按钮 例如:[{"text": "修改", "classname":"btn-blue"}]

      • [text] String optional
        菜单的文本
      • [classname] String optional
        菜单的样式
    • [template] Function optional

      1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据

    • [handle] String optional

      触发的区域,默认是.bui-btn

    • [width] Number optional

      listview的宽度,默认:0, 0 为自适应屏幕宽度

    • [height] Number optional

      listview的高度,默认:0, 0 为自适应内容高度

    • [menuWidth] Number optional

      菜单总宽度,默认:100

    • [menuHeight] Number optional

      菜单的高度 默认:0 自适应内容高度

    • [position] String optional

      菜单侧滑的方向 right | left

    • [zoom] Boolean optional

      since 1.3.0 是否采用缩放宽高的方式 默认 false | true

    • [mask] Boolean optional

      遮罩 true

    • [distance] Number optional

      默认80, 拖拽大于distance才会生效,配合delay可以防止listview又有上下其它事件

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [callback] Function optional

      点击的回调

Example:

html:

   // 示例结构1: 动态渲染
                                       
                                            <ul id="listview" class="bui-listview">
                                                  <li>
                                                      <div class="bui-btn">
                                                          菜单
                                                      </div>
                                                  </li>
                                              </ul>
                                       // 示例结构2: 禁止渲染
                                        
                                            <ul id="listview" class="bui-listview">
                                              <!-- 设置status属性可以避免渲染菜单 -->
                                              <li status="1">
                                                <div class="bui-btn bui-box">
                                                  <div class="span1">不渲染</div>
                                                  <i class="icon-listright"></i>
                                                </div>
                                              </li>
                                            </ul>
                                       // 示例结构3: 静态渲染,可以允许左右都有按钮, 并且在动态加载的列表的时候, 应该只需要初始化一次
                                           <ul id="listview" class="bui-listview">
                                              <li status="1">
                                                <div class="bui-btn bui-box" href="pages/ui_controls/bui.listview.html" param='{"id":"123"}'>
                                                  <div class="span1">静态渲染-左右菜单</div>
                                                  <span class="bui-badges">荐</span>
                                                  <i class="icon-listright"></i>
                                                </div>
                                                <div class="bui-listview-menu swipeleft" data-moving="240">
                                                    <div class="bui-btn primary">置顶</div>
                                                    <div class="bui-btn primary">修改</div>
                                                    <div class="bui-btn danger">删除</div>
                                                </div>
                                                <div class="bui-listview-menu swiperight">
                                                    <div class="bui-btn primary">修改</div>
                                                    <div class="bui-btn danger">删除</div>
                                                </div>
                                              </li>
                                            </ul>
                                    

js:

      // 初始化
                                          var uiListview = bui.listview({
                                                  id: "#listview",
                                                  data: [{ "text": "修改", "classname":"btn-blue"},
                                                          { "text": "删除", "classname":"btn-red"}],
                                                  callback: function (e) {
                                                    var index = $(e.target).text();
                                                        if( index == "修改" ){
                                                            //do something
                                                        }
                                                        this.close();
                                                  }
                                              });
                                         
                                          // 自定义模板初始化
                                          var uiListview = bui.listview({
                                                  id: "#listview",
                                                  data: [{ "text": "修改", "classname":"btn-blue"},
                                                          { "text": "删除", "classname":"btn-red"}],
                                                  callback: function (e) {
                                                    var index = $(e.target).text();
                                                        if( index == "修改" ){
                                                            //do something
                                                        }
                                                        this.close();
                                                  },
                                                  template: function(data) {
                                                      var html = '';
                                                      html += '<div class="bui-listview-menu swipeleft">';
                                                      data && data.forEach(function(el, i) {
                                                          html += '<div class="bui-btn danger">' + el.text + '</div>';
                                                      })
                                                      html += '</div>';
                                                      return html;
                                                  }
                                              });
                                    

Item Index

Events

Methods

active

() Object

Defined in src/scripts/ui/bui.listview.js:325

Available since 1.3.0

获取激活对象

Returns:

Object:

[ swipe对象 ]

Example:

      //是否打开
                                                      var activeUI = uiListview.active();
                                                

close

() chainable

Defined in src/scripts/ui/bui.listview.js:366

Available since 1.3.0

关闭菜单

Example:

       //关闭菜单
                                                       uiListview.close();
                                                

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.listview.js:424

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

      //销毁
                                                      uiListview.destroy();
                                                

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    参数控件本身

lock

() chainable

Defined in src/scripts/ui/bui.listview.js:384

Available since 1.3.0

不允许滑动

Example:

       //关闭菜单
                                                       uiListview.lock();
                                                

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

    不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数

  • [value] String | number | boolean | function optional

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

Example:

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

unlock

() chainable

Defined in src/scripts/ui/bui.listview.js:404

Available since 1.3.0

允许滑动

Example:

      //关闭菜单
                                                      uiListview.unlock();
                                                

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiListviewWidget = uiListview.widget();
                                                

Events

off

Defined in src/scripts/ui/bui.listview.js:521

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "open" | "close"

  • [callback] Function optional

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

Example:

       uiListview.off("lock");
                                                

on

Defined in src/scripts/ui/bui.listview.js:501

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "open" | "close"

  • [callback] Function optional

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

Example:

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