在移動端如何用swiper實現導航欄效果

時間 2019-11-11

標籤移動如何 swiper 實現導航效果欄目無線简体版

原文原文鏈接

　　咱們在寫移動端的時候會有滑動和點擊導航後滑動到目標頁面功能；而這個功能若是本身寫的話會很麻煩，因此我在這推薦一下swiper這個插件。javascript

　　其實swiper中的官網中也有這種功能的實現，可是我認爲是有點麻煩的。而我在網上也沒找到。因此我經過查找和研究弄出了這種方法（也可能有人這麼用了）；css

　　話很少說，上代碼html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
        <style type="text/css">
            .swiper-container{/*把主要的框寫好*/
                width:400px;
                height:400px;
                border:1px solid #aaa;
            }
            .swiper-slide{/*輪播的內容*/
                width:100%;
                height:100%;
                text-align: center;
                line-height: 400px;
            }
            .swiper-pagination{/*裝有小圓點的容器,把它移動到頂部，不過top爲零時容易把內容覆蓋一部分，因此減去小圓點的高度*/
                border-bottom: 1px solid #aaa;
                width:100%;
                height:40px;
                display: flex;
                top:0;
            }
            .swiper-pagination-bullet-active{/*這個是被選取得當前的小圓點的樣式*/
                color:#808080;
            }
            .swiper-pagination-bullet{/*這個是小圓點的樣式*/
                background:transparent;/*背景色設置爲須要的背景*/
                -webkit-flex-grow: 1;/*這個就不用解釋了吧，就是平均分配的彈性盒*/
                text-align: center;
                line-height: 40px;
                border-radius: 0;/*把小圓點從新設置爲矩形*/
                height: 40px;
                color:#000000;
            }
            .swiper-pagination-bullet:nth-child(1):before{/*在元素的內容以前插入新內容;*/
                content:"Slide 1";/*所插入的內容*/
            }
            .swiper-pagination-bullet:nth-child(2):before{
                content:"Slide 2";
            }
            .swiper-pagination-bullet:nth-child(3):before{
                content:"Slide 3";
            }
            .swiper-pagination-bullet:nth-child(4):before{
                content:"Slide 4";
            }
            .swiper-pagination-bullet:nth-child(5):before{
                content:"Slide 5";
            }
        </style>
    </head>
    <body>
        <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>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </body>
</html>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    window.onload = function(){
        var swiper = new Swiper(".swiper-container", {
            pagination: ".swiper-pagination",//顯示小圓點
            autoplay:2000,                     //輪播毫秒數
            loop:true,                         //能夠重複輪播，默認方式是false
            paginationClickable: true,         //值爲真時，當單擊指示器時會執行過渡動畫到目標slide
            speed:300,                         //slides滑動動畫之間的持續時間
            autoplayDisableOninteraction:true,//autoplay不會被禁掉，用戶操做以後每次都會從新啓動autoplay
//            mode:'horizontal',                 //slides滑動方式，水平或垂直
        });
    }
</script>