zhilizhili-ui 2016 写写简单的tabview

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

web 没有tabview

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

设计

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

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

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

 
    
        1
    
    
        2
        
    
        3
            
    
 
    
        1
    
    
        2
    
    
        3
            
        

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

tabbar

    

        @for($i = 0; $i < 3; $i++)
            

                

                    

                        @if($i == 2)
                            测试sdsds <% $i+1 %>
                        @else
                            tab <% $i+1 %>
                        @endif
                    
                
            
        @endfor
    

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

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

html

    

        
1
        
2
        
3
    

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");
});