tab滑动切换内容效果

前端入坑纪 57

今天来分享个曾见到过的tab效果!

好，详解如下！

OK，first things first！ 点我查看实际效果

简约界面

HTML 结构

    <div class="mainWrp">
        <div class="titWrp">
            <div class="titWrpInner">
                <a href="javascript:;">a1</a>
                <a href="javascript:;">a2</a>
                <a href="javascript:;">a3</a>
                <a href="javascript:;">a4</a>
                <a href="javascript:;">a5</a>
                <a href="javascript:;">a6</a>
                <a href="javascript:;">a7</a>
            </div>
        </div>
        <div class="tapConts">
            <div class="tapContsInner">
                <div>a1_Content</div>
                <div>a2_Content</div>
                <div>a3_Content</div>
                <div>a4_Content</div>
                <div>a5_Content</div>
                <div>a6_Content</div>
                <div>a7_Content</div>

            </div>
        </div>
    </div>

所有滚动效果的div都外部嵌套两层div,最外层为屏幕的宽度,次外层为包裹所有内部div一起平铺开来的宽度

CSS 结构

        html,
        body {
            margin: 0;
            padding: 0
        }

        body {
            padding-top: 47px
        }

        a {
            color:#333;
            text-decoration: none
        }

        .titWrp {
            position: absolute;
            top: 3px;
            left: 0;
            width: 100%;
            overflow: hidden;

        }
        .tapConts{
            position: fixed;
            left: 0;
            top: 51px;
            width: 100%;
            bottom:3px
        }
        .tapContsInner,
        .titWrpInner{
            display: flex;
            flex-flow: row nowrap;
            height: 100%;
            transition: transform 500ms ease
        }

        .titWrpInner a {
            flex: 1 0 30%;
            height: 45px;
            line-height: 45px;
            margin: 0 2px;
            display: block;
            text-align: center;
            background-color: aliceblue;
        }
        .tapContsInner div{
            border: 1px solid #ccc;
            box-sizing: border-box;
            flex: 1 0 98%;
            margin: 0 1%;
            height: 100%;
            text-align: center;
            background-color: seashell;
            display: flex;
            flex-flow: column;
            justify-content: center
        }

灵活应用flex布局,铺开所有的内部div,超出部分隐藏不可见.

JavaScript 结构

        var titWrpInner = document.querySelector('.titWrpInner')
        var as = document.querySelectorAll('.titWrpInner a')
        var tapContsInner = document.querySelector('.tapContsInner')
        var tabs = document.querySelectorAll('.tapContsInner div')
        var winWidth = window.innerWidth;
        var asWidth = as[0].offsetWidth;
        
        as.forEach(function(item,index){
            item.addEventListener('click',function(evt){
                var currentElem = evt.target;
                var distance = currentElem.offsetLeft-(winWidth-asWidth)/2;
                 console.log(distance,(winWidth-asWidth)/2)
                if(distance<0){
                    distance=0
                }
                titWrpInner.style.transform="translateX(-"+ distance +"px)"
                tapContsInner.style.transform="translateX(-"+ 100*index +"%)"
            })
        })

简单阐述下效果的原理,每次点击上面的tab时,通过计算移动到中间位置,并且获取它的index值,那就切换视图下面对应index内容块.

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包