vue轮播图

vue轮播图

<!--
 * @Author: xiaohe
 * @LastEditors: xiaohe
-->
<template>
  <div class="share">
    <div class="swiper">
      <i class="el-icon-arrow-left" @click="handleClick('left')"></i>
      <div class="con_box" ref="box">
        <div
          class="swiper_box"
          :style="{ width: boxArray.length * width + 'px' }"
        >
          <div
            class="box"
            v-for="(item, index) in boxArray"
            :key="item.layoutId"
            @click="handleCheck(item)"
          >
            <div class="box_image">
              <!-- <img src="./img/Vectora.png" alt="" /> -->
            </div>
            <div class="box_text">
              <p class="text_p1">{{ index }}</p>
              <span class="text_p2">1</span>
            </div>
          </div>
        </div>
      </div>
      <i class="el-icon-arrow-right" @click="handleClick('right')"></i>
    </div>
  </div>
</template>
<script>


export default {
  name: "",
  data() {
    return {
     
      boxArray: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        // {},
        // {},
        // {},
        // {},
        // {},
        // {},
        // {},
        // {},
        // {},
      ],
      width: 310,
      rightIndex: 1,
      scrollNum: 0,
      tableArray: [],
    };
  },
  mounted() {},
  methods: {
    handleClick(val) {
      // 向左移动
      if (val == "left") {
        if (this.scrollNum == 0 || this.rightIndex == 1) {
          this.rightIndex = 1;
        } else {
          const box = this.$refs.box;
          --this.rightIndex;
          this.scrollNum = 310 * this.rightIndex - 310;
          box.scroll({ top: 0, left: this.scrollNum, behavior: "smooth" });
        }
      }
      // 向右移动
      if (val == "right") {
        const box = this.$refs.box;
        this.scrollNum = 310 * this.rightIndex;
        console.log(this.rightIndex);
        if (this.rightIndex + 3 === this.boxArray.length) {
          // return;
          console.log('--',this.boxArray.length);
        } else {
          this.rightIndex++;
          box.scroll({ top: 0, left: this.scrollNum, behavior: "smooth" });
        }
        // if (this.boxArray.length * this.width - this.scrollNum == 640) {
        // box.scroll({
        //   top: 0,
        //   left: 0,
        //   behavior: "smooth",
        // });
        // this.rightIndex = 1;
        // } else {
        // this.rightIndex++;
        // box.scroll({ top: 0, left: this.scrollNum, behavior: "smooth" });
        // }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.swiper {
  margin-bottom: 24px;
  margin-top: 24px;
  display: flex;

  .con_box {
    width: 1230px;
    overflow-x: scroll;
    .swiper_box {
      display: flex;
      .box {
        cursor: pointer;
        width: 300px;
        height: 82px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        //
        margin-right: 10px;
        padding: 18px 0px 0px 18px;
        display: flex;
        &:hover {
          box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
        }
        .box_image {
          width: 45.83px;
          height: 45.83px;
          // background: #0080ff;
          margin-right: 18px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .box_text {
          .text_p1 {
            font-family: "PingFang SC";
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            // line-height: 22px;
            color: rgba(0, 0, 0, 0.9);
            margin-bottom: 10px;
          }
          .text_p2 {
            padding: 2px 6px;
            font-family: "PingFang SC";
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            background: #fef3ee;
            // line-height: 16px;
            color: #f98559;
          }
        }
      }
    }
  }

  i {
    font-size: 32px;
    line-height: 82px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.15);
  }
}
.con_box::-webkit-scrollbar {
  display: none;
}
</style>