zhilizhili-ui 2016 写写简单的tabview

每天发垃圾文 我也是蛮拼的

web 没有tabview

android 有tabview
ios 有tabcontrol
web 前面所说的是什么

设计

设计要求 点击tab切换 滑动切换

从图片中我们可以看出 上下不定 自动填充布局这个 我以前讲过了 就不写了

如果用xml表述下 就是这样的

<tabview>
 <tabview-tab-bar>
    <tabview-tab-bar__item>
        1
    </tabview-tab-bar__item>
    <tabview-tab-bar__item>
        2
    </tabview-tab-bar__item>    
    <tabview-tab-bar__item>
        3
    </tabview-tab-bar__item>        
 </tabview-tab-bar>   
 <tabview-swipe>
    <tabview-swipe__item>
        1
    </tabview-swipe__item>
    <tabview-swipe__item>
        2
    </tabview-swipe__item>
    <tabview-swipe__item>
        3
    </tabview-swipe__item>        
 </tabview-swipe>       
</tabview>

很显然 我们需要一个tabbar 一个swipe view

tabbar

<div class="tab-bar tab-bar--basic tabview__tab-bar">
    <div class="layout flex horizontal vertical-center">
        @for($i = 0; $i < 3; $i++)
            <div class="layout__item flex-1 tab-bar__item tabview__tab-bar-item" tocuh-action="none">
                <div class="layout flex full-height vertical horizontal-center vertical-center">
                    <div class="layout__item tabview__tab-bar-item-content">
                        @if($i == 2)
                            测试sdsds <% $i+1 %>
                        @else
                            tab <% $i+1 %>
                        @endif
                    </div>
                </div>
            </div>
        @endfor
    </div>
</div>

为了后续测试 我们设置字数不一

好的有了tabbar明显不够 还需要一个swipe-view 这个没必要自己写
找了一个插件 swipe github地址

html

<div class='full-parent swipe-view tabview__swipe-view'>
    <div class='full-parent swipe-view-wrap'>
        <div class="swipe-view__item tabview__swipe-view-item">1</div>
        <div class="swipe-view__item tabview__swipe-view-item">2</div>
        <div class="swipe-view__item tabview__swipe-view-item">3</div>
    </div>
</div>

js 再说

好了 如何去定义一个组件 我按照ios和android的命名方式 尽量靠

比如最简单的tabview

class TabView {

    constructor(selector) {
        var tabView = document.querySelector(`${selector}`);
        var tabViewSwipeElement = document.querySelector(`${selector} .tabview__swipe-view`);
        var tabbarItems = document.queryAll(`${selector} .tabview__tab-bar .tabview__tab-bar-item`);

        var tabViewSwipe = this.setTabViewSwipe(tabViewSwipeElement);

        tabbarItems.forEach(function(tabbarItem, index) {
            tabbarItem.addEventListener("pointerdown", function(e) {
                tabViewSwipe.slide(index, 1000);
            });
        });
    }

    setTabViewSwipe(tabViewSwipeElement) {
        return Swipe(tabViewSwipeElement, {
            continuous: false
        })
    }

}

然后引用就可以了

document.addEventListener("DOMContentLoaded", function() {
    new window.TabView("#tab");
});