Go to comments

移动端 Swiper

一、基本使用

Swiper.js 比较成熟，

是国人开发的一款非常方便的第三方库，可以提升我们开发效率，支持各种姿势的轮播，很多大厂也是在移动端网页中使用它


使用方法 

https://swiper.com.cn/usage/index.html


下载后部分解压文件

core 文件夹是核心代码

vue  中的使用

demo 示例

...


demo 文件夹

default 

navigation 有两边左右的按钮箭头

pagination 有下面的小圆点按钮

autoplay 自动播放

effect-cube 立方块翻面

effect-cards 翻扑克牌

infinite-loop 无限轮播

...


最基础的配置

1. 从Swiper7开始，最外层容器默认类名由 .swiper-container 变更为 .swiper

2. 引入 css 和 js 文件两个文件

3. 初始化  new Swiper() ，参数 .mySwiper 是最外层容器，参数 {} 对象里面配置

4. default 默认横向水平整屏滚动，但不能无缝滚动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>swiper</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
<style>
  html,
  body {
    position: relative;
    height: 100%;
  }
  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }
  .swiper {
    width: 100%;
    height: 100%; 
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
</head>
<body>

  <div class="swiper mySwiper">
    <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>
  </div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {});
  </script>

</body>
</html>


常用配置

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background:tomato;">Slide 1</div>
    <div class="swiper-slide" style="background:#CA4040;">Slide 2</div>
    <div class="swiper-slide" style="background:#FF8604;">Slide 3</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="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script>

  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项，注销该配置默认水平
    loop: true, // 循环模式选项，设置为true是无限
    spaceBetween: 30, // 滚动之间的间隔
    centeredSlides: false, // 什么什么会居中？？？
    preventClicksPropagation : false, // 拖动时阻止冒泡
    autoplay: { // 自动滑动
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: { // 如果需要分页器（小圆点）
      el: '.swiper-pagination',
    },
    navigation: { // 如果需要前进后退按钮
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: { // 如果需要滚动条
      el: '.swiper-scrollbar',
      hide: true,
    },
    mousewheel: true, // 鼠标滚动，默认为false不滚动（需要配合上面的loop循环）
    keyboard : true, // 键盘
  });

</script>


默认是全屏滚动，我们修改一下实现上节课横向滚动轮播

1. 注释一些我们不要的样式

2. .swiper 设置我们自己的需要的尺寸 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>横向无缝滚动</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
<style>
  /* 去掉一些不需要的配置
  html,
  body {
    position: relative;
    height: 100%;
  } */
  body {
    background: #eee;
    /* font-family: Helvetica Neue, Helvetica, Arial, sans-serif; */
    /* font-size: 14px; */
    color: #000;
    margin: 0;
    padding: 0;
  }
  .swiper {
    /* 更改成自己需要的宽高
    width: 100%;
    height: 100%; 
    */
    width: 100vw;
    height: 200px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-slide img {
    display: block;
    width: 100vw; /*图片也修改成自己的需要的尺寸*/
    height: 200px;
    object-fit: cover;
  }
</style>
</head>
<body>

  <div class="swiper mySwiper">
    <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>
    <div class="swiper-pagination"></div> <!-- 分页器 -->
  </div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      loop: true, // 循环模式true是无限
      pagination: { // 小圆点分页器
        el: '.swiper-pagination',
        clickable :true, // 点击小圆点时候自动切换
      },
    });
  </script>

</body>
</html>


二、自己探索

150.freemode.html 

横向滑屏，适合做移动端导航滑动的菜单

freeMode 意思是自由模式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>freemode横向滑屏</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
  <style>
    /* 示例里面的样式 */
    /* 可以不用的
    html,
    body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000; 
      margin: 0;
      padding: 0;
    }*/
    .swiper {
      width: 100%;
      height: 200px;
    }

    /* 自己加的样式 */
    .swiper .swiper-slide{
     text-align: center;
      font-size: 18px;
      background: lightcoral;
      height: 200px;
      line-height: 200px;
    }
  </style>
</head>
<body>

  <!-- 要外层必须是swiper，mySwiper区分多个滚动 -->
  <div class="swiper mySwiper">
    <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 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 class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>
    var mySwiper = new Swiper ('.mySwiper', {
      slidesPerView: 4, // 每页（视口）显示几张图片，默认为3
      spaceBetween: 10, // 轮播图之间的的间隔 
      freeMode: true, // 自由模式默认为true，意思是图片可以在屏幕边缘滑动一半，设置为false是自动吸附的效果
      pagination: { // 小圆点
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>

</body>
</html>


160.scroll-cnmtainer.html

竖向滑屏（垂直滚动）

滑屏使用这个 freeMode: true 自由模式效果好，只使用一个 swiper-slide

注意三个必须的样式，否则滑不动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>scroll-cnmtainer 垂直滚动</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
<style>
  /* swiper默认的样式 */
  html,
  body {
    /* position: relative; */
    height: 100%;  /* 必须的样式，整屏竖向滑动，html和body的高度必须设置100% */
  }
  .swiper {
    width: 100%;
    height: 100%;/* 必须的样式 */
  }
  .swiper-slide {
    font-size: 18px;
    height: auto; /* 必须的样式，整屏竖向滑动，这个元素的高度必须设置为auto，让内容撑起容器的高度 */
    box-sizing: border-box;
  }

  /* 自己的样式 */
  body{
    margin: 0;
  }
  #header,#footer{
    height: 50px;
    width: 100%;
    background-color: #eee;
    position: fixed;
    z-index: 100;
    line-height: 50px;text-align: center;color: #fff;
  }
  #header{
    top: 0;
    border-bottom: 1px solid #ddd;
  }
  #footer{
    bottom: 0;
    border-top: 1px solid #ddd;
  }
  p{
    margin:0;padding:0;
    height:500px;line-height:500px;
    color:#fff;
    text-align:center;
    font-size: 100px;
  }
</style>
</head>
<body>

  <div id="header">header</div>

  <section class="swiper mySwiper" >
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="padding-top:60px;padding-bottom: 60px;"><!-- 在swiper-slide元素上设置上下的margin   -->
        <p style="background:tomato;">1</p>
        <p style="background:deepskyblue;">2</p>
        <p style="background:orange;">3</p>
        <p style="background:deeppink;">4</p>
      </div>
    </div>
    <div class="swiper-scrollbar"></div>
  </section>

  <div id="footer">footer</div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      direction: "vertical", // 垂直
      slidesPerView: "auto", // 
      freeMode: true, // 自由模式（顺着滑屏必须要这个好，以swiper-slide为滑动单位）
      scrollbar: { // 侧边滚动条
        el: ".swiper-scrollbar",
      },
      mousewheel: true, // 默认值为true，表示允许鼠标滚动
    });
  </script>

</body>
</html>


页面有横、竖两个滚动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>横竖组合</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
<style>
  /* swiper默认的样式 */
  html,
  body {
    /* position: relative; */
    height: 100%; /* 整屏滑动必须的样式*/
  }
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    height: auto; /* 整屏竖向滑动必须的样式*/
  }
  /* 自己的样式 */
  body{
    margin: 0;
    background: #f5f5f5;
    color: #fff;
  }
  #header{
    height: 50px;
    width: 100%;
    background-color: #e64a48;
    position: fixed;
    top: 0;
    z-index: 100;
    box-shadow: 0 3px 6px rgba(120, 120, 120, .5);
  }
  #footer{
    height: 50px;
    width: 100%;
    background-color: #fff;
    border-top:1px solid #e7e9e1;
    position: fixed;
    bottom: 0;
    z-index: 100;
    box-shadow: 0 -3px 6px rgba(150, 150, 150, .5);
  }
  .common{
    height: 250px;
    margin-bottom: 10px;
  }
  .slideContainer{
    margin-top: 60px;
    margin-bottom: 60px;
  }
</style>
</head>
<body>

  <div id="header">header</div>

  <section class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slideContainer">
        <!-- 横向滑屏 -->
        <div class="swiper common horizontal_1">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202201/164242168139798.jpg) no-repeat center/cover;">Slide 1</div>
            <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202311/169936708299182.jpg) no-repeat center/cover;">Slide 2</div>
            <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202212/166989798079799.jpg) no-repeat center/cover;">Slide 3</div>
          </div>
        </div>
        <!-- 内容 -->
        <div style="height:600px; margin-bottom:10px; background:url(http://ruyic.com/blog/uploads/image/202304/168195371837071.jpg) no-repeat center/cover;"></div>
        <!-- 横向滑屏 -->
        <div class="swiper common horizontal_2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="background:tomato;">Slide 1</div>
            <div class="swiper-slide" style="background:#CA4040;">Slide 2</div>
            <div class="swiper-slide" style="background:#FF8604;">Slide 3</div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <!-- 内容 -->
        <div style="height:400px;background:url(http://ruyic.com/blog/uploads/image/202212/167128700952936.gif) no-repeat center/cover;"></div>
      </div>
    </div>
  </section>

  <div id="footer">footer</div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>
    // 初始化滑动
    function initSlide() {
      new Swiper('.mySwiper', {
        direction: "vertical",
        slidesPerView: "auto",
        freeMode: true,
        momentumRatio: 2,
        momentumVelocityRatio: 5
      });

      new Swiper('.horizontal_1', {
        slidesPerView: "auto",
        freeMode: true,
        pagination: { // 小圆点
          el: ".swiper-pagination",
          clickable: true,
        },
        momentumRatio: 2,
        momentumVelocityRatio: 5
      });
      
      new Swiper('.horizontal_2', {
        slidesPerView: "auto",
        freeMode: false,
        pagination: { // 小圆点
          el: ".swiper-pagination",
          clickable: true,
        },
        momentumRatio: 2,
        momentumVelocityRatio: 5
      });
    }

    initSlide();

  </script>
</body>
</html>


解决Swiper不能滑动的问题

var mySwiper = new Swiper('.swiper-container',{
  pagination : '.swiper-pagination',
  paginationClickable: true,
  longSwipesRatio: 0.3,
  touchRatio:1,
  observer:true,//修改swiper自己或子元素时，自动初始化swiper
  observeParents:true,//修改swiper的父元素时，自动初始化swiper
});

转自：https://www.qyyshop.com/info/303613.html



Leave a comment 0 Comments.

Leave a Reply

换一张