BUI

其它版本:

API for BUI 1.5.4

Show:

bui.listview Class

侧滑列表

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

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

预览地址: demo

方法说明:

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

Constructor

bui.listview

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • [data] Array optional

      [点击触发侧滑的按钮 例如:[{ "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

获取激活对象

Returns:

Object:

[ swipe对象 ]

Example:

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

close

() chainable

关闭菜单

Example:

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

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

      //销毁
      uiListview.destroy();

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    [参数控件本身]

lock

() chainable

不允许滑动

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

允许滑动

Example:

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

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 ]

Example:

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

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

       uiListview.off("lock");

on

为控件绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

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