Swiper實現導航欄滾動效果

在制作h5移動端頁面時經常遇到可以滾動的導航欄，下面是利用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>
                <div class="swiper-slide">關於</div>
                <span></span>
            </div>
        </div>
    </div>

3、編寫style

*{
     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;

  }

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