Swiper 내 비게 이 션 바 스크롤 효과 구현

일부 모 바 일 앱 에서 네 비게 이 션 표시 줄 이 굴 러 가 는 것 을 볼 수 있 습 니 다.다음 의 예 는 vant 의 공식 문서 에서 볼 수 있 습 니 다.이러한 굴 러 가 는 효 과 는 Swiper 를 이용 하여 도 실 현 될 수 있 습 니 다.효 과 는 현재 클릭 한'태그'를 기점 으로 현재 태그 의 위치 가 시각의 절반 이상 일 때 용기 의 위 치 를 일정한 위치 로 옮 기 는 것 입 니 다.현재 클릭 한"탭"을 항상 시선 의 중간 위치 에 있 게 합 니 다.

1.관련 플러그 인 도입

<link rel="stylesheet" href="../css/swiper.css" >
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="../js/swiper.js"></script>

2.view(인터페이스)작성

<div class="box">
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide">  </div>
 <div class="swiper-slide">  </div>
 <div class="swiper-slide">  </div>
 <div class="swiper-slide">  </div>
 <div class="swiper-slide">  </div>
 <div class="swiper-slide">  </div>
 <div class="swiper-slide">    </div>
 <span></span>
 </div>
 </div>
</div>

3.스타일 작성

*{
 margin: 0;
 padding: 0;
 }
 .box{
 width: 500px;
 height: 50px;
 border: 1px solid #000;
 margin: 100px auto;
 }
 .swiper-container{
 width: auto!important;
 height: 100%;
 text-align: center;
 line-height: 50px;
 color: #000;
 font-size: 20px;
 }
 .swiper-wrapper{
 position: relative;
 width: auto!important;
 height: 100%;
 }
 .swiper-slide {
 list-style: none;
 display: flex;
 justify-content: flex-start;
 flex-wrap: nowrap;
 cursor: pointer;
 }
 .swiper-wrapper span{
 position: absolute;
 height: 3px;
 background: #000;
 left: 1%;
 top: 85%;
 }
 .swiper-slide{
 width: auto!important;
 margin-right: 15px!important;
 padding: 0 18px;
 }

모든 swiper-slide 의 너 비 를 내용 으로 지탱 하기 위해 오른쪽 에 반 은 사용자 에 게 이 네 비게 이 션 표시 줄 이 굴 러 갈 수 있 음 을 알려 줍 니 다.따라서 초기 화 할 때 swiper 의 slidesPerView 를 auto 로 설정 하고 slidesPerView:"auto"를 설정 하 며 css 에 swiper-slide 스타일 을 다음 과 같이 설정 해 야 합 니 다.

 .swiper-slide{
 width: auto!important;
 margin-right: 15px!important;
 padding: 0 18px;
 }

이렇게 swiper-slide 의 너 비 는 내용 에 의 해 지탱 되 고 자 유 롭 게 구 를 수 있 습 니 다.

4.js 작성

$(function () {
 $(".swiper-wrapper span").css({width: $(".swiper-slide")[0].offsetWidth});
 let navScroll = new Swiper('.box .swiper-container', {
 freeMode:true,
 slidesPerView: "auto",
 freeModeMomentumRatio: 0.5,
 on:{
 //  swiper-slide       
 click:function (e) {
  let thisWidth = this.clickedSlide.offsetWidth;
  let thisLeft = this.clickedSlide.offsetLeft;
  let offsetX = this.width / 2 - thisLeft - thisWidth / 2;
  //    1/2    ，       
  if (offsetX > 0){
  offsetX = 0;
  }
  //offsetX         ，              
  else if (offsetX < this.maxTranslate()){
  offsetX = this.maxTranslate();
  }
  //         
  this.setTransition(300);
  this.setTranslate(offsetX);
  //            
  $(".swiper-wrapper span").animate({left: thisLeft, width: thisWidth},400);
 }
 }
 });
 })

최종 효과

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.