时间戳

首页 > 解决方案 > 如何使用 Vue.js 在 JavaScript 中循环使用表格制作的轮播

javascript - 如何使用 Vue.js 在 JavaScript 中循环使用表格制作的轮播

问题描述

我尝试使用表格制作自定义轮播，但我很困惑如何在点击最后一个标签后制作我的轮播循环（在这种情况下，最后一个标签表示td元素的最后一个）。目前我已经成功让它自动播放，但是当自动播放到达最后一个项目时，我很困惑如何让它循环。

为了您的信息，我正在使用 Vue.js 来制作它，如果您想尝试它，这就是沙箱

这是我的模板：

<template>

<div class="merchandise-item-wrapper">
  <table class="merchandise-table">
    <tr id="customWrapper">
      <td
        :class="index == 0 ? 'item-store active' : 'item-store'"
        v-for="(j, index) in 6"
        :key="index"
      >
        <div>
          <div
            class="portfolio-img bg-white position-relative text-center overflow-hidden"
          >
            <img
              class="merchandise-img"
              src="https://via.placeholder.com/300x300"
            />
          </div>
          <div style="padding-top: 3vh;">
            <div class="portfolio-hover-main text-center">
              <div class="portfolio-hover-box align-middle">
                <div
                  class="portfolio-hover-content position-relative"
                >
                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">
                        Kode Pesanan
                      </p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-code">
                        Putih (TS1), Hitam (TS2), Navy (TS3)
                      </p>
                    </div>
                  </div>

                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">
                        Deskripsi
                      </p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-text number-of-lines-3">
                        Lorem ipsum dolor sit amet consectetur,
                        adipisicing elit. Nostrum, porro! Illo
                        facere soluta molestiae repellat odio porro
                        id est tenetur nesciunt, ea, similique
                        consequuntur? Voluptate dolorum explicabo
                        quo quaerat deserunt?
                      </p>
                    </div>
                  </div>

                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">Harga</p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-price">Rp 80.000</p>
                    </div>
                  </div>

                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">Ukuran</p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-size">XS - XXL</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

</template>

这是我的风格：

.merchandise-item-wrapper {
  overflow: hidden;
  overflow-x: auto;
}

.merchandise-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.merchandise-table td {
  padding: 0px 8px;
  width: 100%;
  min-width: 380px;
  max-width: 400px;
}

.item-store {
  transform: scale(0.75);
}

.item-store.active {
  transform: scale(1);
}

这些是我实现自动播放的方法：

methods: {
  itemSlider() {
    let autoScroller = document.getElementById("customWrapper");
    let item = autoScroller.getElementsByTagName("td");
    let multiplier = 0;
    let imgScaller = 0;
    let imgPointer = 0;
    setInterval(function() {
      console.log("cek start : ", multiplier);
      if (item[imgPointer + 1].classList != undefined) {
        autoScroller.style.transform = `translateX(${-380 * multiplier}px)`;
      }

      for (let i = 0; i < item.length; i++) {
        if (item[imgPointer + 1].classList != undefined && i == imgScaller) {
          imgPointer = i;
        }
      }

      item[imgPointer].classList.remove("active");
      if (imgPointer < item.length - 1) {
        item[imgPointer + 1].classList.add("active");
        console.log("cek pointer if : ", imgPointer);
      }

      if (multiplier < item.length - 1) {
        multiplier++;
        imgScaller++;
        console.log("cek update : ", multiplier);
      } else {
        console.log("last update : ", multiplier);
        item[imgPointer].classList.remove("active");
        multiplier = 0;
        imgScaller = 0;
        imgPointer = 0;
        item[imgPointer].classList.add("active");
      }
    }, 3000);
  }
},

mounted() {
  this.itemSlider();
}

在打到最后一节后，我很困惑找到循环卡的方法，目前，我只能将其移回第一个位置。

标签： javascripthtmlcssvuejs2

解决方案

终于我可以解决这个问题了，这个答案是给和我有同样问题的你，

对于无限循环，您需要通过克隆要附加动态索引的元素（在我的情况下）来解决它，所以我调整我的代码直到看起来像这样

    itemSlider() {
      let autoScroller = document.getElementById("customWrapper");
      let item = autoScroller.getElementsByTagName("td");
      let multiplier = 0;
      let imgScaller = 0;
      setInterval(function() {
        if (item[imgScaller + 1].classList != undefined) {
          autoScroller.style.transform = `translateX(${-380 * multiplier}px)`;
        }

        if (imgScaller - 1 != -1 && imgScaller != 0) {
          let firstSlide = item[imgScaller - 1];
          let cloneFirst = firstSlide.cloneNode(true);
          autoScroller.appendChild(cloneFirst);
        }

        if (imgScaller) {
          item[imgScaller + 1].classList.add("active");
        }
        if (imgScaller - 1 != -1) {
          item[imgScaller].classList.remove("active");
          item[imgScaller - 1].classList.remove("active");
        }

        multiplier++;
        imgScaller++;
      }, 3000);
    }

但是如果你知道我只是想知道如果你从性能上看我的代码已经足够了吗？因为我只追加它而不删除最旧的？，如果你能优化它会对我有很大帮助，谢谢

推荐阅读