swiper Scrollbar滚动条组件详解

Swiper 是一个流行的移动端触摸滑动插件，它支持各种滑动效果，同时还提供了一组插件组件，用于扩展滑动的功能，其中之一就是 Scrollbar 滚动条组件。

Scrollbar 滚动条组件

Scrollbar 组件可以添加一个滚动条来显示 Swiper 容器的滑块位置。当内容区域比 Swiper 容器小时，它可以作为进度条指示当前显示内容占整个内容的比例。

基本用法

要使用 Scrollbar 组件，我们需要同时引入 Swiper 和 Scrollbar 的相关代码，并在 Swiper 的配置中设置 scrollbar 属性。

<!-- 引入 Swiper 和 Swiper Scrollbar -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script src="https://unpkg.com/swiper/js/swiper-bundle.min.js"></script>

<!-- 在 HTML 中设置 Swiper 容器 -->
<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>
  <!-- Scrollbar 组件 -->
  <div class="swiper-scrollbar"></div>
</div>

<!-- 在 JavaScript 中初始化 Swiper -->
<script>
  var mySwiper = new Swiper('.swiper-container', {
    // 开启 Scrollbar 组件
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
</script>

改变滚动条的样式

Scrollbar 组件提供了一系列的 CSS 类，可以用于修改滚动条的样式，包括：

swiper-scrollbar：Scrollbar 组件的默认样式，包裹整个滚动条。
swiper-scrollbar-drag：滚动条的滑块。
swiper-scrollbar-drag-x、swiper-scrollbar-drag-y：横向和竖向滑块的样式。

例如，我们可以通过 CSS 修改滑块的背景色和透明度来改变滚动条的样式：

.swiper-scrollbar-drag {
  background-color: rgba(179, 179, 179, 0.5);
}

示例 1：自定义滚动条样式

下面是一段完整的代码示例，它将滚动条的样式改变为红色的条形滑块，以及修改了滑块的宽度和高度：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Swiper Scrollbar 示例</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper-bundle.min.css" />
  <style>
    .swiper-scrollbar {
      height: 10px;
    }

    .swiper-scrollbar-drag {
      width: 30px;
      height: 100%;
      background-color: red;
      box-shadow: none;
      border-radius: 0;
    }
  </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>
    <div class="swiper-scrollbar"></div>
  </div>

  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
  <script src="https://unpkg.com/swiper/js/swiper-bundle.min.js"></script>

  <script>
    var mySwiper = new Swiper('.swiper-container', {
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
  </script>
</body>

</html>

示例 2：隐藏滚动条

除了修改样式外，我们还可以通过配置来隐藏滚动条。可以将 scrollbar.hide 属性设置为 true 或者自定义 CSS 类来隐藏滚动条：

var mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    hide: true, // 隐藏滚动条
  },
});

var mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    hide: 'my-custom-class', // 自定义 CSS 类来隐藏滚动条
  },
});

我们还可以利用 on 事件来实现滚动条的自动隐藏和显示：

var mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    hide: true,
  },
  on: {
    // 滑动时显示滚动条
    transitionStart: function () {
      mySwiper.scrollbar.$el.show();
    },
    // 停止滑动时隐藏滚动条
    transitionEnd: function () {
      mySwiper.scrollbar.$el.hide();
    },
  },
});

这样，滑动时会显示滚动条，停止滑动后又会自动隐藏。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：swiper Scrollbar滚动条组件详解 - Python技术站