移动端-无缝滑屏-1

2020-03-06

在PC端，轮播组件在设计的时候只需要考虑横向上的设计，但是在移动端需要考虑横纵上的设计：比如在移动端的轮播图上竖向划屏，是应该触发轮播图的事件还是APP页面的上划移动，这种冲突就是抖动。

所以我这次的目标是实现一个防抖动的无缝滑屏

初步布局

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />
    <title>无缝滑屏</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #wrap {
        overflow: hidden;
        height: 100%;
      }
      .carousel-wrap>.my-list {
        width: 500%;
        /* ul里的li浮动后，ul高度塌陷，所以要清除浮动 */
        overflow: hidden; /* 移动端清除浮动的方式 */
      }
      .my-list > li {
        width: 20%;
        list-style: none;
        float: left; /* 父级元素ul的宽度不够如此设置依然不能成为一行 */
      }
      .my-list > li > a,
      .my-list > li > a > img {
        display: block; /* 不写这个有空隙 */
      }
      .my-list > li > a > img {
        width: 100%; /* 一层层寻找设置宽度的父级元素，并以此为标准 */
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div class="carousel-wrap">
        <ul class="my-list">
                <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/2.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/3.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/4.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/5.jpg" alt=""></a></li>
        </ul>
      </div>
    </div>
  </body>
  
</html>

初步的效果，但是问题来了：1.要封装成一个组件，图片的数量和内容都不能是静态写死的 2.要暴露出一个让用户使用无缝滑屏的接口 3.my-list类的宽度不能是静态的

先解决问题3：动态创建节点和动态设置宽度

首先css要做修改

/* css */
 * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #wrap {
        overflow: hidden;
        height: 100%;
      }
      .carousel-wrap>.my-list {
        /* display: flex;也可以使用弹性盒+盒子宽度500% */
       /*  width: 500%; */
        /* ul里的li浮动后，ul高度塌陷，所以要清除浮动 */
        overflow: hidden; /* 移动端清除浮动的方式 */
        /* 脱离文档流，carousel-wrap高度塌陷 */
        position: absolute;
      }
      .my-list > li {
        /* width: 20%; */
        list-style: none;
        float: left; /* 父级元素ul的宽度不够如此设置依然不能成为一行 */
      }
      .my-list > li > a,
      .my-list > li > a > img {
        display: block; /* 不写这个有空隙 */
      }
      .my-list > li > a > img {
        width: 100%; /* 一层层寻找设置宽度的父级元素，并以此为标准 */
      }

/* js */
/* 模拟从后台拿到的数据 */
let src = [
      "/img/1.jpg",
      "/img/2.jpg",
      "/img/3.jpg",
      "/img/4.jpg",
      "/img/5.jpg",
    ];
let carouselWrap = document.querySelector(".carousel-wrap");
/* 使用插件的用户的存放图片path的数组不一定名：src，所以通过一个函数来规定 */
    function carousel(src=["/img/1.jpg",
      "/img/2.jpg",
      "/img/3.jpg"]) {
    /* 如果页面中有.carousel-wrap */
      if (carouselWrap) {
        let ul = document.createElement("ul");
        let ulWidth = src.length*100;
        let liWidth = 100/src.length;
        let liFromUl = ul.getElementsByTagName('li');
        ul.classList.add('my-list');
        /* 动态创建DOM节点 */
        src.forEach((i) => {
          ul.innerHTML += `<li><a href="javascript:;"><img src="${i}" alt=""></a></li>`;
        });
        /* 动态计算滑动容器的宽度 */
        ul.style.width = ulWidth+'%';
        [...liFromUl].forEach((item)=>{
            item.style.width = liWidth+'%';
        })
        
       /* 解决carouselWrap高度塌陷问题 */
        [...carouselWrap].forEach(item=>{
            item.appendChild(ul);
            /* let img = document.querySelector('.my-list > li > a > img');console.dir(img.clientHeight);高度为0的原因：调试可知：在执行到这个语句时DOM节点还未渲染出来，所以没有高度。问题解决：异步编程 */
            let imgTime = setTimeout(()=>{
            let img = document.querySelector('.my-list > li > a > img');
            item.style.height = img.clientHeight+'px';
            clearInterval(imgTime);
            },0)
            /* 获取ul>li中的img的高度赋值给carouselWrap */
        })   
      }
    }