swiper自定义滚动条样式

最新推荐文章于 2025-06-08 16:45:12 发布

杨杨得亿~

最新推荐文章于 2025-06-08 16:45:12 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js css html 前端框架

本文链接：https://blog.csdn.net/ys_dd/article/details/119904488

本文介绍了如何使用Swiper库在HTML中创建一个垂直滚动的滑块，并自定义滚动条的样式和交互。通过设置`direction`属性为垂直，启用`freeMode`自由滚动模式，以及配置`scrollbar`参数来定制滚动条的外观和行为。CSS代码详细定义了滚动条的背景颜色、宽度和内边距，以及拖动元素的样式和旋转小方块的细节。JavaScript部分用于初始化Swiper实例，配置滑动速度、视图数量等选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

HTML代码：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in carList" :k
            <div class="mask_center_p">
                <div class="center_pone">{{item.carStyleName}}</div>
                <div class="center_ptwo">VIN：{{item.vin}}</div>
            </div>
        </div>
        <div class="no-data" v-if="!carList.length">暂无可绑定的车辆
    </div>
    <div class="swiper-scrollbar"></div>
</div>

js代码：

this.mySwiper = new Swiper('.swiper-container', {
    speed: 300,
    slidesPerView: 'auto',
    // draggable:true,
    freeMode: true,
    direction: 'vertical',
    setWrapperSize: true,
    scrollbar: {
        el: '.swiper-scrollbar',
        dragSize: 16, //本来应该和css的高都写成15，但是css还加了border，所以要高一厘米
        draggable: true
    },
});

css代码：

.swiper-scrollbar {
    background-color: #d2d1d3;
    right: 12px;
    width: 2px;
}
.swiper-scrollbar-drag {
    height: 15PX !important;    //这个高度很重要需和js里面的高度保持一致，代表的是自定义图案的高
    width: 24px !important;
    background-color: #fff !important;
    border: 1px solid #cfced0;
    left: -12px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &::before {
        display: block;
        content: '';
        width: 5px;
        height: 5px;
        border-top: 1px solid #cfced0;
        border-left: 1px solid #cfced0;
        transform: rotate(45deg);
        // margin-bottom: 5px;
         
    }
    &::after {
        display: block;
        content: '';
        width: 5px;
        height: 5px;
        border-bottom: 1px solid #cfced0;
        border-right: 1px solid #cfced0;
        transform: rotate(45deg);
       
    }
}