Tab

选项卡组件。

调用方式

HTML 示意:

<div class="ui-tab">
    <ul class="ui-tab-nav ui-border-b">
        <li class="current">热门推荐</li>
        <li>全部表情</li>
        <li>表情</li>
    </ul>
    <ul class="ui-tab-content" style="width:300%">
        <li class="current">选项1内容</li>
        <li>选项2内容</li>
        <li>选项3内容</li>
    </ul>
</div>

这里定义两个概念:wrapper 和 scroller。wrapper 即外层的包含 DOM,如 div.ui-tab;scroller 即内部滚动的元素,如 ul.ui-tab-content。组件初始化的时候需要传入 wrapper ('.ui-tab')。实际滚动的是内部的 scroller ('.ui-tab-content')

组件会自动为 ui-tab-navui-tab-content 内的 li 元素添加 current 类。

JS 代码示意:

window.addEventListener('load', function(){

    var tab = new fz.Scroll('.ui-tab', {
        role: 'tab',
        autoplay: true,
        interval: 3000
    });

    /* 滑动开始前 */
    tab.on('beforeScrollStart', function(from, to) {
        // from 为当前页,to 为下一页
    })

    /* 滑动结束 */
    tab.on('scrollEnd', function(curPage) {
        // curPage 当前页
    });

})
</script>

配置说明

name type default description
autopaly boolean false 自动播放
interval int 2000ms 自动播放间隔时间
duration int 300ms 切换动画过渡时间
bounce boolean true 反弹动画
beforeScrollStart function function(){} 滑动开始前调用(参数:来源页from、切换页to)
scrollEnd function function(){} 滑动结束时调用(参数:当前页 curPage)
enable() function - 全局开关,开启滚动
disable() function - 全局开关,禁止滚动
refresh() function - 刷新当前位置
destroy() function - 销毁对象

DEMO演示

<!-- html -->
<div class="ui-tab">
    <ul class="ui-tab-nav ui-border-b">
        <li class="current">热门推荐</li>
        <li>全部表情</li>
        <li>表情</li>
    </ul>
    <ul class="ui-tab-content" style="width:300%">
        <li class="current"><p>内容</p><p>内容</p><p>内容</p><p>内容</p></li>
        <li><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p></li>
        <li><p>内容</p><p>内容</p></li>
    </ul>
</div>


<!-- js -->
<script>
(function() {

    var tab = new fz.Scroll('.ui-tab', {
        role: 'tab',
        autoplay: true,
        interval: 3000
    });

    tab.on('beforeScrollStart', function(from, to) {
        console.log(from, to);
    });

    tab.on('scrollEnd', function(curPage) {
        console.log(curPage);
    });

})();
</script>