new Slide()
页面切换，图片滑动等全部统一使用mo.Slide
- 版本:
- 1.0
- 继承:
- 依赖:
-
- module:lib/zepto.js
- module:src/base.js
- module:src/tab.js
- 源码:
- slide.js, line 1
Example
var tab1 = new mo.Slide({
target: $('#slide01 li')
});参数
属性
方法
事件
| 名称 | 类型 | 参数 | 默认值 | 描述 |
|---|---|---|---|---|
config.touchMove |
boolean |
<optional> |
true | 是否允许手指滑动 |
config.target |
object | string | 目标选项卡片，即供切换的 Elements list (Elements.length >= 2) | ||
config.controller |
object | string |
<optional> |
'ul>li*' | 触发器 |
config.effect |
string |
<optional> |
'slide' | 指定效果，可选值：'slide', 'push', 'flip' |
config.direction |
string |
<optional> |
'x' | 指定方向，仅效果为'slide'时有效 |
config.autoPlay |
boolean |
<optional> |
false | 是否自动播放 |
config.playTo |
number |
<optional> |
0 | 默认播放第几个（索引值计数，即0开始的计数方式） |
config.type |
string |
<optional> |
'mouseover' | 事件触发类型 |
config.currentClass |
string |
<optional> |
'current' | 当前样式名称, 多tab嵌套时有指定需求 |
config.link |
boolean |
<optional> |
false | tab controller中的链接是否可被点击 |
config.stay |
number |
<optional> |
2000 | 自动播放时停留时间 |
config.disable |
number |
<optional> |
禁止某屏滚动 | |
config.loop |
boolean |
<optional> |
false | 是否启用循环滚动 |
config.delay |
number |
<optional> |
150 | mouseover触发延迟时间 |
config.prevBtn |
object | string |
<optional> |
播放前一张，调用prev() | |
config.nextBtn |
object | string |
<optional> |
插放后一张，调用next() | |
config.easing |
string |
<optional> |
'swing' | 动画方式：默认可选(可加载Zepto.easying.js扩充)：'swing', 'linear' |
config.event |
object{string:function} |
<optional> |
初始化绑定的事件 | |
config.title |
object{'dataSrc':Element, 'dataProp':String, 'dataWrap':Element, 'delay': Number} |
<optional> |
初始化绑定的事件 | |
config.lazy |
boolean |
<optional> |
false | 是否启用按需加载，需要按需加载的元素设置data-src属性 |
-
container :object
-
目标选项卡片容器
- 继承自:
- mo.Tab#container
- 源码:
- tab.js, line 152
-
controller :object
-
目标选项卡片控制器
- 继承自:
- mo.Tab#controller
- 源码:
- tab.js, line 134
-
curPage :number|undefined
-
当前播放第几个的索引值
- 继承自:
- mo.Tab#curPage
- 源码:
- tab.js, line 146
-
isPlaying :boolean
-
播放状态
- 继承自:
- mo.Tab#isPlaying
- 源码:
- tab.js, line 162
-
prevPage :number|undefined
-
上一个选项卡的索引值
- 继承自:
- mo.Tab#prevPage
- 源码:
- tab.js, line 140
-
target :object
-
目标选项卡片
- 继承自:
- mo.Tab#target
- 源码:
- tab.js, line 128
-
constructor()
-
构造函数
- 继承自:
- mo.Tab#constructor
- 源码:
- base.js, line 42
-
disable()
-
禁用某屏
- 继承自:
- mo.Tab#disable
- 源码:
- tab.js, line 553
-
enable()
-
启用某屏
- 继承自:
- mo.Tab#enable
- 源码:
- tab.js, line 567
-
next()
-
播放后一个
- 继承自:
- mo.Tab#next
- 源码:
- tab.js, line 493
-
off()
-
绑定事件
- 继承自:
- mo.Tab#off
- 源码:
- base.js, line 61
-
on()
-
绑定事件
- 继承自:
- mo.Tab#on
- 源码:
- base.js, line 52
-
play()
-
开始自动播放
- 继承自:
- mo.Tab#play
- 源码:
- tab.js, line 532
-
playTo(page)
-
播放到第几个选项卡
- 继承自:
- mo.Tab#playTo
- 源码:
- tab.js, line 371
-
prev()
-
播放前一个
- 继承自:
- mo.Tab#prev
- 源码:
- tab.js, line 500
-
stop()
-
停止自动播放
- 继承自:
- mo.Tab#stop
- 源码:
- tab.js, line 542
-
switchTo()
-
无动画效果切换
- 继承自:
- mo.Tab#switchTo
- 源码:
- tab.js, line 586
-
trigger()
-
触发事件
- 继承自:
- mo.Tab#trigger
- 源码:
- base.js, line 69
-
beforechange
-
- 继承自:
- mo.Tab#event:beforechange
- 源码:
- tab.js, line 466
名称 类型 描述 eventobject 开始切换 -
beforeinit
-
- 继承自:
- mo.Tab#event:beforeinit
- 源码:
- tab.js, line 200
名称 类型 描述 eventobject 开始初始化前 -
change
-
- 继承自:
- mo.Tab#event:change
- 源码:
- tab.js, line 758
名称 类型 描述 eventobject 切换完成 -
init
-
- 继承自:
- mo.Tab#event:init
- 源码:
- tab.js, line 215
名称 类型 描述 eventobject 初始化完成 -
touchend
-
- 继承自:
- mo.Tab#event:touchend
- 源码:
- tab.js, line 703
名称 类型 描述 eventobject 开始切换 -
touchmove
-
- 继承自:
- mo.Tab#event:touchmove
- 源码:
- tab.js, line 671
名称 类型 描述 eventobject 开始切换 -
touchstart
-
- 继承自:
- mo.Tab#event:touchstart
- 源码:
- tab.js, line 628
名称 类型 描述 eventobject 开始切换
默认滚动效果slide运行Demo二维码
Loading...推动滚动效果push运行Demo二维码
Loading...3d翻转效果flip运行Demo二维码
Loading...循环滚动运行Demo二维码
Loading...锁屏运行Demo二维码
Loading...嵌套的slide运行Demo二维码
Loading...按需加载运行Demo二维码
Loading...