原生JS 编写移动端 tab选项卡

最新推荐文章于 2021-10-10 18:24:16 发布

weixin_34018202

最新推荐文章于 2021-10-10 18:24:16 发布

阅读量748

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b91d46ef265da0aac6fbbf6

版权

相关代码如下：在PC 端无法拖拽滑动因为此触发事件为touchstart、touchmove、touchend，所以此功能仅可在移动端实现滑动切换，实现效果是仿照mui框架的选项卡实现，未考虑兼容性，如有错误欢迎指正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>slide-tab</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing:border-box;
            
        }
        .tab-nav{
            margin-top:10px;
            overflow: hidden;
            touch-action: none;
        }
        .tab-slide{
            display: flex;
            flex-direction: row;
        }
        .tab-slide .slide-item{
            text-align: center;
            flex:1;
            height:28px;
            border-bottom:1px solid #efefef;
        }
        .tab-nav .tab-slide-main .main-content{
            font-size:16px;
            line-height:50px;
            text-align:center;
            width:100%;
            display:inline-block;
            border:1px solid #0f643f;
            white-space: normal;
            margin-top:10px;
        }
        .tab-nav .tab-slide-main{
            font-size:0;
            white-space: nowrap;
            transition:all 0s linear;
            transform: translate3d(0px, 0px, 0px) translateZ(0px);
            transition-duration: 0ms;
            transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .slide-bar{
            height:2px;
            background-color:#df0384;
        }
    </style>
</head>
<body>
    <div class="tab-nav">
        <div class="tab-slide">
            <div class="slide-item slide-active">登录</div>
            <div class="slide-item">注册</div>
            <div class="slide-item ">找回密码</div>
            <div class="slide-item">注册</div>
            <div class="slide-item ">找回密码</div>
        </div>
        <div class="slide-bar" id="slideBar"></div>
        <div class="tab-slide-main" id="main">
            <div class="main-content" id="mainM"  draggable="true">登录内容</div>
             <div class="main-content" draggable="true">注册内容</div> 
             <div class="main-content" draggable="true">找回密码</div> 
             <div class="main-content" draggable="true">注册内容</div> 
             <div class="main-content" draggable="true">找回密码</div> 
        </div>
    </div>
    <div class="demo"></div>
     <script>
         window.onload=function(){
             let initx=0;
             let endx=0;
             let x=0;
             let index=0;
             let length=document.querySelectorAll('.main-content').length-1;
             let pageWindow=window.innerWidth;
             let moveDom=document.getElementById('main')
             let mainM=document.getElementById('mainM')
             let flag=true;
             let bar=document.getElementById('slideBar');
             let barmove=pageWindow/(length+1)
             bar.style.width=barmove+'px'
             document.ontouchstart=function(e){
                main.style.transitionDuration=0+'ms'
                initx=e.touches[0].pageX
             }
             document.ontouchmove=function(e){
                flag=e.touches[0].pageX-initx;
                 x=e.touches[0].pageX-initx+endx;
                 moveDom.style.transform='translate3d('+x+'px,0,0)'
                 bar.style.transform='translate3d('+(-x/length)+'px,0,0)'
                event.preventDefault();
             }
             document.ontouchend=function(e){
                 let move;
                 main.style.transitionDuration=500+'ms'
                 bar.style.transitionDuration=500+'ms'
                 if(Math.abs(flag)<(pageWindow/2)){
                     move=-pageWindow*index;
                 }else{
                    move=-(flag < 0 ? pageWindow*(index>= length ? length : ++index):pageWindow*(index<=0 ? 0 : --index));
                 }
                 moveDom.style.transform='translate3d('+move+'px,0,0)'
                 bar.style.transform='translate3d('+''+barmove*index+'px,0,0)'
                 endx=move;
               
             }
         }
     </script>
</body>
</html>
复制代码

移动端轮播图

**此代码稍微改动，就可实现移动端轮播图滑动的效果**

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
    <title>slide-tab3333</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;

        }

        .tab-nav {
            margin-top: 10px;
            overflow: hidden;
            touch-action: none;
            position: relative;
        }

        /* .tab-slide{
            display: flex;
            flex-direction: row;
        }
        .tab-slide .slide-item{
            text-align: center;
            flex:1;
            height:28px;
            border-bottom:1px solid #efefef;
        } */
        .tab-nav .tab-slide-main .main-content {
            line-height: 50px;
            text-align: center;
            width: 100%;
            display: inline-block;
            border-top: 1px solid #0f643f;
            border-bottom: 1px solid #0f643f;
            white-space: normal;
            margin-top: 10px;
            font-size: 14px;
        }

        .tab-nav .tab-slide-main .main-content img {
            width: 100%;
            height: 150px;
            vertical-align: bottom;
            transition: all 0.5s;
        }

        .tab-nav .tab-slide-main {
            font-size: 0;
            white-space: nowrap;
            transition: all 1s linear;
            transform: translate3d(0px, 0px, 0px) translateZ(0px);
            transition-duration: 0ms;
            transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .doc {
            overflow: hidden;
            height: 30px;
            position: absolute;
            bottom: 0px;
            z-index: 10;
            margin-left: -15px;
            left: 50%;
            transform: translateX(-50%)
        }

        .doc li {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(100, 92, 60, .5);
            float: left;
            text-decoration: none;
            list-style-type: none;
            color: #34f;
            margin-left: 15px;
        }

        .doc li.active {
            background: rgba(255, 40, 60, .5);
        }

        /* .slide-bar{
            height:2px;
            background-color:#df0384;
        } */
    </style>
</head>

<body>
    <div class="tab-nav">
        <div class="tab-slide-main" id="main">
            <div class="main-content" id="mainM" draggable="true">
                <img src="image/table.jpg" />
            </div>
            <div class="main-content" draggable="true">
                <img src="image/map-new.png" />
            </div>
            <div class="main-content" draggable="true">
                <img src="image/card.png" />
            </div>
        </div>
        <ul class="doc" id="doc">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="demo"></div>
    <script>
        window.onload = function () {
            let initx = 0;
            let endx = 0;
            let x = 0;
            let index = 0;
            let length = document.querySelectorAll('.main-content').length - 1;
            let pageWindow = window.innerWidth;
            let moveDom = document.getElementById('main')
            let flag = true;
            let doc = document.getElementById('doc')
            var timer;
            document.ontouchstart = function (e) {
                main.style.transitionDuration = 0 + 'ms'
                initx = e.touches[0].pageX;
                clearInterval(timer)
            }
            document.ontouchmove = function (e) {
                flag = e.touches[0].pageX - initx;
                console.log(flag,index)
                x = e.touches[0].pageX - initx -pageWindow*index;
                console.log(x)
                moveDom.style.transform = 'translate3d(' + x + 'px,0,0)'
                event.preventDefault();
            }
            document.ontouchend = function (e) {
                let move;
                main.style.transitionDuration = 500 + 'ms'
                if (Math.abs(flag) < (pageWindow / 2)) {
                    move = -pageWindow * index;
                } else {
                    move = -(flag < 0 ? pageWindow * (index >= length ? length : ++index) : pageWindow * (index <=
                        0 ? 0 : --index));
                }
                moveDom.style.transform = 'translate3d(' + move + 'px,0,0)'
                endx = move;
                Array.from(doc.children).forEach(val => {
                    val.className = ''
                })
                doc.children[index].className = "active"
                timerStart()
            }

            function timerStart() {
                timer = setInterval(() => {
                    index++;
                    if (index == 3) {
                        index = 0;
                    }
                    moveDom.style.transform = 'translate3d(' + '-' + pageWindow * index + 'px,0,0)'
                    Array.from(doc.children).forEach(val => {
                        val.className = ''
                    })
                    doc.children[index].className = "active"
                    doc.children[index].className = "active"
                    main.style.transitionDuration = 500 + 'ms'
                }, 1500)
            }
                   timerStart()
        }
    </script>
</body>

</html>

复制代码

转载于:https://juejin.im/post/5b91d46ef265da0aac6fbbf6

weixin_34018202

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS 编写移动端 tab选项卡

相关代码如下：在PC 端无法拖拽滑动因为此触发事件为touchstart、touchmove、touchend，所以此功能仅可在移动端实现滑动切换，实现效果是仿照mui框架的选项卡实现，未考虑兼容性，如有错误欢迎指正<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫