bui.swipe Class
Constructor
bui.swipe
(
-
option
Parameters:
-
optionObject-
idString[控件id]
-
[handle] [触发的区域,配合swipe可以滑动触发]String optional -
[swiperight] [触发右滑的目标]String optional -
[swipeleft] [触发左滑的目标]String optional -
[swipeup] [触发上滑的目标]String optional -
[swipedown] [触发下滑的目标]String optional -
[direction] [ x | y | xy]Number optional -
[width] [ id的宽度, 默认0 即 屏幕宽度]Number optional -
[height] [id的高度, 默认0 即 屏幕高度]Number optional -
[movingDistance] [ handle 移动的距离,默认位移280]Number optional -
[initDistance] [ handle 初始化的距离,默认0]Number optional -
[alwaysTrigger] [ 1.3.4增加 默认false; 不管滑动的距离有没有达标,总是触发open或者close事件]Boolean optional -
[hasChild] [ swipe下面有多个swipe的时候为true]Boolean optional -
[handleMove] [ handle是否需要移动 默认 true | false]Boolean optional -
[targetMove] [ target是否需要移动 默认 true | false]Boolean optional -
[zoom] [ 是否缩放 默认 false | true]Boolean optional -
[distance] [ 默认40, 拖拽大于distance才会生效,配合delay可以防止slide又有上下其它事件]Number optional -
[transition] [ 默认300, 滑动动画的过渡时长]Number optional -
[onBeforeInit] [ 1.5.1新增 初始化前触发]Function optional -
[onInited] [ 1.5.1新增 初始化以后触发]Function optional
-
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",
});
Methods
active
()
chainable
获取激活的对象,只有在有多个需要激活的active才会有,正常情况下是null
Example:
var activeUI = uiSwipe.active();
activeUI.close();
close
()
chainable
关闭侧滑栏
Example:
//关闭所有侧滑
uiSwipe.close();
destroy
(
-
[bool] [ 默认: false 销毁部分 | true 销毁全部]
[销毁控件]
Parameters:
-
[bool] [ 默认: false 销毁部分 | true 销毁全部]Boolean optional
Example:
//销毁
uiSwipe.destroy();
init
(
chainable
-
[option] [参数控件本身]
初始化方法,用于重新初始化结构,事件只初始化一次
Parameters:
-
[option] [参数控件本身]Object optional
isActive
()
chainable
是否已经激活
Example:
var isActive = uiSwipe.isActive();
lock
()
chainable
不允许滑动
Example:
//锁住滑动
uiSwipe.lock();
open
(
chainable
-
option
打开侧滑
Parameters:
-
optionObject-
[target] [打开侧滑的方向, 默认: "swiperight"(在左边的菜单) | "swipeleft"(在右边的菜单) | "swipeup"(在下边的菜单) | "swipedown"(在上边的菜单)]String optional -
[index] [打开第几个侧滑]String optional -
[transition] [打开是否需要动画, 默认 300 毫秒, 不需要动画则设置为 "none"]String optional
-
Example:
//显示菜单
uiSwipe.open();
uiSwipe.open({
"target":"swipedown",
"transition": "none"
});
unlock
()
chainable
允许滑动
Example:
//可以滑动
uiSwipe.unlock();
Events
off
为控件取消绑定事件
Event Payload:
-
[type] [ 事件类型: "open" | "close" | "touchstart" | "touchmove" | "touchend"]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
uiSwipe.off("lock");
on
为控件绑定事件
Event Payload:
-
[type] [ 事件类型: "open" | "close" | "touchstart" | "touchmove" | "touchend"]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
uiSwipe.on("lock",function () {
// 点击的菜单
console.log(this);
});