天天发渣滓文 我也是蛮拼的

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