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技术站