Notas de estudio: el complemento swiper realiza una barra de navegación deslizante y adaptativa

Al crear una barra de navegación horizontal o vertical, a veces hay muchos elementos de navegación en la barra de navegación, que están muy llenos cuando se muestran en la misma fila o columna, y el texto puede ajustarse. Es muy feo mostrar la barra de navegación en dos filas o dos columnas. En este momento, podemos ocultar parte del contenido de la barra de navegación y mostrar solo unos pocos a la vez de acuerdo con el ancho del texto.

---

 1. Código:

        <div class="swiper-nav">
            <div class="page-tab swiper-container" id="swiper">
                <ul class="tab-wrapper swiper-wrapper">
                    <li class="tab-item swiper-slide">
                        <div class="tab-item-wrapper">
                            <span class="tab-name fontSize18">选项卡一</span>
                        </div>
                    </li>
                    <li class="tab-item swiper-slide">
                        <div class="tab-item-wrapper">
                            <span class="tab-name fontSize18">选项卡二</span>
                        </div>
                    </li>
                    <li class="tab-item swiper-slide">
                        <div class="tab-item-wrapper">
                            <span class="tab-name fontSize18">选项卡三</span>
                        </div>
                    </li>
                    <li class="tab-item swiper-slide">
                        <div class="tab-item-wrapper">
                            <span class="tab-name fontSize18">选项卡四</span>
                        </div>
                    </li>
                    <li class="tab-item swiper-slide">
                        <div class="tab-item-wrapper">
                            <span class="tab-name fontSize18">选项卡五</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="product-wrapper"></div>

            * { margin: 0; padding: 0; }
            ul { list-style: none; }
            fontSize18 { font-size: 18!important; }
            /* 选项卡 */
            .swiper-nav {
                width: 100%;
                height: 5em;
                box-sizing: border-box;
                border-bottom: 1px solid rgba(0,0,0,0.3);
                background-color: #FAFAFA;
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }
            .page-tab {
                width: 80%;
                height: 90%;
            }
            .tab-wrapper {
                margin: 0 auto;
                height: 100%;
                display: flex;
                align-items: flex-end; 
            }
            .tab-item {
                flex-shrink: 0;
                height: 80%;
                padding: 0 1.5em;
                border-right: 1px solid #CACECA;
                box-sizing: border-box;
                position: relative;
                color: black;
            }
            .tab-item:last-child { border-right: none; }
            .tab-item-wrapper {
                width: auto;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            .underline { color: #006722!important; }
            .underline::before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 60%;
                height: 3px;
                background-color: #006722;
                transform: translate(-50%, 0);
            }
            .tab-name {
                flex-shrink: 0;
                font-weight: 300;
                word-break: break-word;
            }
            .product-wrapper { 
                width: 100%;
                text-align: center;
                margin-top: 20px;
            }

            var nowWindowWith = $(window).width()
            var nowNav = '#swiper'
            var $TabNum = 0;
            
            if(nowWindowWith <= 850)  $TabNum = 3 
            else if(nowWindowWith <= 1520)  $TabNum = 4 
            else $TabNum = 5 
            
            function initSwiper(tabNum) {
                var mySwiper = new Swiper ('#swiper', {
                    slidesPerView: tabNum,
                    spaceBetween: 0
                })   
            }
            initSwiper($TabNum);
            // 选项卡切换
            $('.tab-item').on('click', function() { 
                if($(this).hasClass('underline')) return
                $(this).addClass('underline').siblings().removeClass('underline')
                $('.product-wrapper').empty().text($(this).find('.tab-name').text() + '内容')
            })
            $(`.tab-item`).eq(0).trigger('click')
            
            $(window).resize(function() {
                var newTabNum = 0;
                nowWindowWith = $(window).width()
                if(nowWindowWith <= 850)  newTabNum = 3
                else if(nowWindowWith <= 1520)  newTabNum = 4 
                else newTabNum = 5 
                if($TabNum == newTabNum) return;
                $TabNum = newTabNum;
                setTimeout(() => { initSwiper($TabNum) }, 20)
            })

2. Darse cuenta del efecto:

Cuando el ancho de la pantalla es superior a 1520 px:

Cuando el ancho de la pantalla es de 850 a 1520 px:

Cuando el ancho de la pantalla es inferior a 850 px:

 

3. Puntos principales

El plug-in swiper se usa principalmente aquí, que es poderoso.

Puntos de uso: al inicializar Swiper, debe pasar parámetros dinámicamente al nuevo Swiper para determinar cuántos elementos de navegación mostrar a la vez.

Y a través de $ (ventana) .resize (function () {$ (window) .width ()}) para obtener el ancho de pantalla actual en tiempo real, para decidir cuántos elementos de navegación mostrar.