前言

最近在开发过程中遇到下图的一个需求，要求红框内的内容可以左右滚动，同时下面的小指示器可以显示滚动的进度。

类似于这样的功能非常常见，比如拼多多首页的展示以及支付宝点击基金进去的基金市场都是这样的效果。这种效果通常用在展示的内容太多放不下时，增加一个滑动展示的效果。

实现

在经过查找后，发现使用swiper实现最为方便快捷，而且代码实现起来也很简单方便。

主要是用到了swiper的scrollBar属性，它可以显示滑动的进度，用到的swiper版本为 4.5.3。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/swiper.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="up">
                    <img src="./img/yugan.jpg" alt="">
                </div>
                <div class="down last">
                    <img src="./img/fox.jpg" alt="">
                </div>
            </div>
             <!--...........-->
            <div class="swiper-slide">
                <div class="up">
                    <img src="./img/11.jpg" alt="">
                </div>
                <div class="down last">
                    <img src="./img/jiu.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class='progess'>
        <div class="swiper-scrollbar"></div>
    </div>
    
    <script type="text/javascript" src="../js/swiper.js"></script>
    <script src="./index.js"></script>
</body>
</html>

css

 *{
    padding: 0;
    margin:  0;
 }
 html, body {
     width: 100%;
     height: 100%;
 }

 body {
     padding: 20px 10px 0;
     box-sizing: border-box;
     background-color: aquamarine;
 }

.swiper {
    height: 170px;
    background-color: #fff;
    padding: 10px;
    overflow: hidden;
} 

.swiper-slide {
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center; 
     background-color: aqua;
     flex-direction: column; 
}

.progess {
    width: 100%;
    height: 10px;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.swiper-scrollbar {
    width: 20%;
    height: 5px;
    background-color: #eee;
}

.swiper-scrollbar-drag {
    background-color: orange;
}

.up, .down {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: solid 2px #000;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
}

.up img, .down img {
    width: 100%;
    height: 100%;
    background-size: 100%;
}

.last {
    margin-bottom: 0;
}

js

var mySwiper = new Swiper ('.swiper', {
    slidesPerView : 3, 
    spaceBetween : 20,
    scrollbar: {
      el: '.swiper-scrollbar',
      dragSize: '40'
    },
  })

最后效果

其他

在查找资料时，发现swiper7支持了一个很好用的便于实现这个要求的功能，那就是Gird网格多行多列布局。它可以使slide实现换行，并且可以决定是竖向换行还是横向换行。

swiper7.0 Gird

resistanceRatio

上面的代码实现了需求，但是当swiper滑动到最左边和最右边时还可以继续向外侧边界滑动。而拼多多以及支付宝的滑到边界后则无法继续向边界滑动。

在实际代码中，也会出现我们设置的slidesPerView为3，但实际只出现两个slide的情况，此时如果在左右边界还能滑动的话效果就很不好。

swiper为我们提供了一个resistanceRatio属性，当将他设置为0时，即可以在滑动到边界时停止滑动不超出边界。

改动后的swiper初始化

var mySwiper = new Swiper ('.swiper', {
    slidesPerView : 3, 
    spaceBetween : 20,
    resistanceRatio : 0,
    scrollbar: {
      el: '.swiper-scrollbar',
      dragSize: '40'
    },
  })

resistanceRatio

swiper实现水平滑动进度条

前言

实现

html

css

js

最后效果

其他

resistanceRatio