利用swiper仿iphone時間設置滾輪控件

先貼一下實現之后的樣子：

可以上下滾動選擇，也可以點擊選擇。

具體實現：

1.關於swiper的使用就不多說啦，去官網看下都能明白。

 

2.然后是初始化swiper，這才是重點

var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 5,//每頁顯示的side個數
                    paginationClickable: true,//是否支持點擊
                    spaceBetween: 5,//每個side的距離
                　　direction: 'vertical',//是否ֱ垂直居中
                　　centeredSlides: true,//是否顯示居中
                　　initialSlide :0,//初始位置
                　　slideToClickedSlide:true//是否點擊居中
            });

 

初始完之后，就是對樣式的調整，為了達到以下的效果，我們需要調整樣式

 

 

我們可以利用這三個類，分別表示當前選中的slide的前一個，當前的slide，接下來的slider

 

讓選中的slider的font-size變大，前后的slider變小，其他的slider變的更小

    .swiper-slide {
        text-align: center;
        background: #fff;
        color:gray;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide-active{
        color:black;
         font-size: 20px;
    }
    .swiper-slide-prev{
         font-size: 16px;
    }
    .swiper-slide-next{
         font-size: 16px;
    }

ok，這樣就有點樣子啦。然后是這兩條分割線。

我實現的思路是用定位，將一個div定上去，因為swiper設置了居中的屬性，我們只要讓居中那個slider展示在這個div里面就可以啦。

.active_line {
    position: absolute;
    width: 90%;
    left: 5%;
    top: 50%;
    margin-top: -0.2rem;
    height: 0.4rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9;
}

 

不過要注意的一點是z-index的設置。

在項目實現的過程中，有一點也是讓我琢磨了一番，畢竟是引用swiper。當初始化的時候，整個html結構是必須存在的

<div class="outer">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">Slide 1   背景</div>
                            <div class="swiper-slide">Slide 2   北京</div>
                            <div class="swiper-slide">Slide 3   上海</div>
                            <div class="swiper-slide">Slide 4   你好</div>
                            <div class="swiper-slide">Slide 5   城市</div>
                            <div class="swiper-slide">Slide 6   深圳 </div>
                            <div class="swiper-slide">Slide 7   廣州</div>
                            <div class="swiper-slide">Slide 8   成都</div>
                            <div class="swiper-slide">Slide 9</div>
                            <div class="swiper-slide">Slide 10</div>
                        </div>
                    </div>
    </div>

如果是動態創建的slider節點，不可能是先初始化再完善html。所以一定要在dom創建並插入之后再進行初始化才能正常運行。