swiper4实现移动端导航栏tab滑动切换

实现移动端导航栏tab滑动切换，可以使用Swiper4这个强大的移动端轮播图插件。

下面是实现步骤：

1. 引入Swiper4插件的js和css文件

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

1. HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Tab 1</div>
    <div class="swiper-slide">Tab 2</div>
    <div class="swiper-slide">Tab 3</div>
  </div>
</div>

在swiper-container中放置swiper-wrapper和swiper-slide，swiper-slide是每个tab的内容，swiper-wrapper包含所有的swiper-slide。

1. 初始化Swiper4：

使用new关键词初始化swiper。

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

这里mySwiper是随意取的名字，.swiper-container是我们刚才写的HTML结构中最外层的class，可修改为其他名称。

1. CSS样式：

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

这里我们定义了swiper-container和swiper-slide的样式。.swiper-container的宽高都设置为100%；.swiper-slide的宽高也都设置为100%，并且将文字居中显示。

现在，我们的移动端导航栏tab滑动切换就完成了。具体效果可以参考下面的示例。

示例一：https://codepen.io/ibufu/pen/abJBpZW

示例二：https://codepen.io/ibufu/pen/OJWqXOG

在这两个示例中，我们都使用了Swiper4插件，实现了移动端导航栏tab滑动切换。其中，示例一的swiper还加入了页面链接，实现了切换时滑动切换和跳转到指定页面的效果。