×

TAB切换功能:既可以滑动又可以点击

作者:ceshi2018.03.06来源:Web前端之家浏览:19683评论:0

TAB切换功能:既可以滑动又可以点击。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  <style>
    *{box-sizing: border-box;margin: 0;padding: 0;}
    body{background-color: #f8f9fc;}
    .case-title{border-bottom: 1px solid #ddd;background-color: #fff;}
    .swiper-slide.case-tab{width: 150px;line-height: 50px;text-align: center;font-size: 16px;}
    .swiper-slide.case-tab.active-nav{color: #fd7b03}
    .swiper-slide.container{padding: 10px;height: 260px}
    .case-detail{height:100%;box-shadow: 0 3px 8px #ccc;padding: 10px 0 20px;background-color: #fff;}
    .case-name{font-size: 16px;color: 333;padding: 10px 15px}
    .case-des{color: #999;padding: 0 30px;}
    .swiper-slide.show-more{height:260px;display: flex;justify-content: center;align-items: center;color: #999}
    .vertical-text{width: 20px;display: inline-block;vertical-align: middle;}
    .icon-slide-more{display: inline-block;vertical-align: middle;font-style: normal;}
  </style>
</head>
<body>
  <div>
    <div class="swiper-container case-title" id="caseTitle" >
      <div class="swiper-wrapper">
        <div class="case-tab swiper-slide active-nav">主题</div>
        <div class="case-tab swiper-slide">取景</div>
        <div class="case-tab swiper-slide">要素</div>
      </div>
    </div>
    <div id="caseContainer" style="width:100%">
      <div class="swiper-wrapper">
        <div class="swiper-slide container">
          <div class="case-detail">            
                        <h2 class="case-name">风景</h2>
                        <p class="case-des">最普遍的摄影题材</p>
                        <h2 class="case-name">人像</h2>
                        <p class="case-des">最亲民的,没有之一</p>
                        <h2 class="case-name">人文</h2>
                        <p class="case-des">与人文相关的题材总容易引起共鸣</p>
          </div>
        </div>
        <div class="swiper-slide container">
          <div class="case-detail">
            <h2 class="case-name">场景</h2>
                        <p class="case-des">直接影响照片好坏</p>
                        <h2 class="case-name">角度</h2>
                        <p class="case-des">换个角度看世界</p>
                        <h2 class="case-name">取舍</h2>
                        <p class="case-des">摄影是减法</p>
          </div>
        </div>
        <div class="swiper-slide container">
          <div class="case-detail">
            <h2 class="case-name">构图</h2>
                        <p class="case-des">横向构图,三分构图,框式构图</p>
                        <h2 class="case-name">曝光</h2>
                        <p class="case-des">基本功</p>
                        <h2 class="case-name">虚实</h2>
                        <p class="case-des">突出主体,丰富层次</p>
          </div>
        </div>
        <div class="swiper-slide container show-more" style="width: 100px">
          <div class="slide-more">
            <p class="vertical-text">左滑查看更多</p>
                        <i class="icon-slide-more">>></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
  let swiper1 = new Swiper('#caseTitle',{
      watchSlidesProgress : true,         //开启这个参数来计算每个slide的progress(进度),以便判断是否最后一帧
      watchSlidesVisibility : true,       //为每个可见的slide增加一个classname:‘ swiper-slide-visible ’
      slidesPerView: 'auto',              //设置slider容器能够同时显示的slides数量,'auto'则自动根据slides的宽度来设定数量
      freeMode: true,                     //为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合
      on:{
          tap: function(){                //点击 tab 时,跳转相应的内容页
              swiper2.slideTo( swiper1.clickedIndex)
          }
      }
  })
  let swiper2 = new Swiper('#caseContainer',{
      slidesPerView: 'auto',              // 最后一帧宽度小,故设为自动识别
      on:{
          slideChangeTransitionStart: function(){       //内容页开始滑动时 响应导航栏
              updateNavPosition()
          },
          touchEnd: function(){
              //左滑查看更多
              let prg = this.progress                   //进度
              let index = this.snapIndex,               //当前序号
                  length = this.slides.length-1         //内容页 页数-1
              if(prg>1 && index===length){              //判断处于最后一帧,且进度超过 1 (倒数第二帧滑动时也可能使进度超过1)
                  // do something
                  slideMore()
              }
          },
      }
  })

  function updateNavPosition(){
      let pages = parseInt($('#caseTitle .swiper-slide').length)          //导航栏数量
      let currentContextIndex = swiper2.activeIndex                       //内容页活动页
      let to = currentContextIndex>=pages?pages-1:currentContextIndex     //内容页3,4页活动时都跳转至 导航栏的3页
      $('#caseTitle .active-nav').removeClass('active-nav')
      $('#caseTitle .swiper-slide').eq(to).addClass('active-nav');
      swiper1.slideTo(to)
  }

  function slideMore(){
      console.log('到底了!')
  }
})

</script>
</html>


您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/JS2FSDDU242398409238.html

网友评论文明上网理性发言 已有0人参与

发表评论: