滚动条位置异常；前进后退按钮有延迟

首页课程实战体系课手记专栏慕课教程

滚动条位置异常；前进后退按钮有延迟

来源：2-1 swiper垂直滚动基本示例

今天也要加了个油

2020-10-19 08:54:22

具体遇到的问题

设置 loop: true 之后滚动条显示位置异常

移动端 fastclick.js 失效

报错信息的截图

尝试过的解决思路和结果

设置 dragSize ，无效，位置依旧异常

引入 fastclick.js 无效，延迟问题依然存在

粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 500px;
        height: 250px;
      }
      .swiper-slide img {
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <!-- <link rel="stylesheet" href="css/swiper-bundle.min.css" /> -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/1.jpg" alt="pic1" /></div>
        <div class="swiper-slide"><img src="img/2.jpg" alt="pic2" /></div>
        <div class="swiper-slide"><img src="img/3.jpg" alt="pic3" /></div>
        <div class="swiper-slide"><img src="img/4.jpg" alt="pic4" /></div>
        <div class="swiper-slide"><img src="img/5.jpg" alt="pic5" /></div>
        <div class="swiper-slide"><img src="img/6.jpg" alt="pic6" /></div>
      </div>

      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-scrollbar"></div>
    </div>

    <!-- <script src="js/swiper-bundle.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

    <script>
      var mySwiper = new Swiper(".swiper-container", {
        initialSlide: 0,
        speed: 300,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        scrollbar: {
          el: ".swiper-scrollbar",
          dragSize: "16%",
        },
      });
    </script>
  </body>
</html>

写回答

1回答

好帮手慕久久

2020-10-19

已采纳

同学你好，问题解答如下：

滚动条的位置有异常，是因为设置了loop选项，将loop去掉后，它的位置就是正常的，如下：
原因是loop选项会影响滚动条的位置计算，官网中的demo也存在这个问题。
老师测试了官网中提供的demo，的确存在移动端点击会有延迟的现象。建议同学使用swiper3或者swiper4试试，这两个版本的会相对好些。
由于swiper本身会存在一些bug，因此建议挑选没有bug的功能或适应的版本来使用。