学习笔记——swiper插件实现滑动导航栏并自适应

Myth丶恋晨 2022-11-05 10:58 436阅读 0赞

> 在做水平或垂直方向导航栏时，有时导航栏中导航项非常多，显示在同一行或列显得十分拥挤，并且文本可能会换行。而将导航栏显示成两行或者两列又十分难看。这时我们可以将导航栏的部分内容隐藏，并且根据文本宽度，一次只显示几个。
> 
>

--------------------

###  1.代码： ###

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

### 2.实现效果： ###

**当屏幕宽度为1520px以上时：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]**

**当屏幕宽度为850至1520px时：**

**![20210306092548180.png][]**

**当屏幕宽度为850px以下时：**

**![20210306092608304.png][]**

### 3.要点 ###

> 这里主要使用了swiper插件，该插件功能强大。
> 
> 使用要点：初始化Swiper时，需要动态地给new Swiper内传递参数，来决定一次要显示几个导航项。
> 
> 并且通过$(window).resize(function() \{ $(window).width() \})实时获取当前屏幕地宽度，从而决定要显示几个导航项。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221023/b2414980212d4e959882355d4766b8ef.png
[20210306092548180.png]: /images/20221023/d392f2f23a974a148c9445db317a7369.png
[20210306092608304.png]: /images/20221023/cf5c62e3655649a3a215790312c40e32.png