BUI

其它版本:

API for BUI 1.5.1

Show:

bui.swipe Class

swipe滑动控件

滑动控件,支持4个方向的滑动, sidebar 跟 listview 都基于swipe控件制作

预览地址: demo

方法说明:

active: 获取当前打开的对象
isActive: 是否打开状态
open: 打开哪个方向的
close: 关闭
lock: 不允许滑动
unlock: 允许滑动
控件预览

Constructor

bui.swipe

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • [handle] String optional

      [触发的区域,配合swipe可以滑动触发 ]

    • [swiperight] String optional

      [触发右滑的目标 ]

    • [swipeleft] String optional

      [触发左滑的目标 ]

    • [swipeup] String optional

      [触发上滑的目标 ]

    • [swipedown] String optional

      [触发下滑的目标 ]

    • [direction] Number optional

      [ x | y | xy ]

    • [width] Number optional

      [ id的宽度, 默认0 即 屏幕宽度 ]

    • [height] Number optional

      [id的高度, 默认0 即 屏幕高度 ]

    • [movingDistance] Number optional

      [ handle 移动的距离,默认位移280]

    • [initDistance] Number optional

      [ handle 初始化的距离,默认0]

    • [alwaysTrigger] Boolean optional

      [ 1.3.4增加 默认false; 不管滑动的距离有没有达标,总是触发open或者close事件 ]

    • [hasChild] Boolean optional

      [ swipe下面有多个swipe的时候为true ]

    • [handleMove] Boolean optional

      [ handle是否需要移动 默认 true | false]

    • [targetMove] Boolean optional

      [ target是否需要移动 默认 true | false]

    • [zoom] Boolean optional

      [ 是否缩放 默认 false | true]

    • [distance] Number optional

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

    • [transition] Number optional

      [ 默认300, 滑动动画的过渡时长 ]

    • [onBeforeInit] Function optional

      [ 1.5.1新增 初始化前触发 ]

    • [onInited] Function optional

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

Example:

   html: 

    <div id="sidebarWrap" class="wrap">
      <div class="swipeleft">往左滑动出现的内容</div>
      <div class="bui-page">滑动区域</div>
    </div>  

   js: 
   var uiSwipe = bui.swipe({
             id: "#sidebarWrap",
             handle: ".bui-page",
             movingDistance: 200,
             direction: "xy",
         });

Item Index

Events

Methods

active

() chainable

获取激活的对象,只有在有多个需要激活的active才会有,正常情况下是null

Example:

            var activeUI = uiSwipe.active();

            activeUI.close();

close

() chainable

关闭侧滑栏

Example:

            //关闭所有侧滑
            uiSwipe.close();

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

           //销毁
           uiSwipe.destroy();

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    [参数控件本身]

isActive

() chainable

是否已经激活

Example:

            var isActive = uiSwipe.isActive();

lock

() chainable

不允许滑动

Example:

           //锁住滑动
           uiSwipe.lock();

open

(
  • option
)
chainable

打开侧滑

Parameters:

  • option Object
    • [target] String optional

      [打开侧滑的方向, 默认: "swiperight"(在左边的菜单) | "swipeleft"(在右边的菜单) | "swipeup"(在下边的菜单) | "swipedown"(在上边的菜单)]

    • [index] String optional

      [打开第几个侧滑 ]

    • [transition] String optional

      [打开是否需要动画, 默认 300 毫秒, 不需要动画则设置为 "none" ]

Example:

            //显示菜单
            uiSwipe.open();

            uiSwipe.open({
              "target":"swipedown",
              "transition": "none"
            });

unlock

() chainable

允许滑动

Example:

           //可以滑动
           uiSwipe.unlock();

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

    [ 事件类型: "open" | "close" | "touchstart" | "touchmove" | "touchend" ]

  • [callback] Function optional

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

Example:

           uiSwipe.off("lock");

on

为控件绑定事件

Event Payload:

  • [type] String optional

    [ 事件类型: "open" | "close" | "touchstart" | "touchmove" | "touchend" ]

  • [callback] Function optional

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

Example:

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