vue-实现pc端点击滚动-左右箭头滑动

实现的效果

代码

<template>
  <div class="ChargeTabs">
    <div class="button_connent">
      <div class="button_item" @click="reduceLastOneFn">
        <img src="@/assets/overview/tab1.png">
      </div>
      <div class="button_item" @click="reduceOneFn">
        <img src="@/assets/overview/tab2.png">
      </div>
    </div>
    <div id="list-box" class="tabList">
      <div id="list" class="list">
        <div
          v-for="(item, index) in editPrivateDevicesList"
          :key="index"
          :class="
            currIndex === index
              ? 'tabList_item tabList_item_isSelect'
              : 'tabList_item'
          "
          @click="changeIndex(index)"
        >
          {{ item.privateDeviceName }}
        </div>
      </div>
    </div>
    <div class="button_connent">
      <div class="button_item" @click="addOneFn">
        <img src="@/assets/overview/tab3.png">
      </div>
      <div class="button_item" @click="addLastOneFn">
        <img src="@/assets/overview/tab4.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnergyPlatformBaseChargeTabs',
  props: {
    privateDevicesList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      editPrivateDevicesList: [
        {
          privateDeviceName: '测试-切换栏'
        },
        {
          privateDeviceName: '测试-切换栏'
        },
        {
          privateDeviceName: '测试-切换栏'
        },
        {
          privateDeviceName: '测试-切换栏'
        }
      ],
      currIndex: 0
    }
  },
  watch: {
    privateDevicesList(value) {
      this.editPrivateDevicesList = value
    }
  },

  mounted() {
    this.editPrivateDevicesList = this.privateDevicesList
  },

  methods: {

    addOneFn() {
      const allLength = this.privateDevicesList.length * 210
      const boxLength = document.getElementById('list-box').clientWidth
      if (allLength < boxLength) return
      const listEl = document.getElementById('list')
      const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
      if (leftMove + boxLength + 630 > allLength) {
        listEl.style.left = '-' + (allLength - boxLength) + 'px'
      } else {
        listEl.style.left = '-' + (leftMove + 630) + 'px'
      }
    },
    addLastOneFn() {
      const listEl = document.getElementById('list')
      const allLength = this.privateDevicesList.length * 210
      listEl.style.left = '-' + (allLength - 630) + 'px'
    },

    reduceOneFn() {
      const allLength = this.privateDevicesList.length * 210
      const boxLength = document.getElementById('list-box').clientWidth
      if (allLength < boxLength) return
      const listEl = document.getElementById('list')
      const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
      if (leftMove + boxLength - 630 < boxLength) {
        // 到最开始的时候
        listEl.style.left = '0px'
      } else {
        listEl.style.left = '-' + (leftMove - 630) + 'px'
      }
    },
    reduceLastOneFn() {
      const listEl = document.getElementById('list')
      listEl.style.left = 0 + 'px'
    },
    changeIndex(index) {
      this.currIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.ChargeTabs {
  display: flex;
  // width: 100%;
  align-items: center;
  width: 100%;

  .tabList {
    display: flex;
    align-items: center;
    font-size: 12px;
    width: calc(100% - 160px);
    overflow: hidden;

    .list {
      width: calc(100% - 160px);
            display: flex;
            transform: all 2s;
            .list-item {
              width: 100px;
              height: 100%;
              text-align: center;
              padding: 10px;
              cursor: pointer;
              margin-left: 40px;
            }
            position: relative;
            left: 0;
            transition: left 1s;
            .tabList_item {
              min-width: 200px;
              cursor: pointer;
              display: flex;
              justify-content: center;
              background-color: #fff;
              border-radius: 4px;
              padding: 6px 12px;
              margin-right: 10px;
              &:hover {
                background-color: #E6F7F8;
              }
            }
            .tabList_item_isSelect {
              background-color: #f1fbf7;
              border: 1px solid #08b2bd;
            }
          }

  }

  .button_connent {
    width: 80px;
    height: 100%;
    display: flex;
    justify-content: center;
    .button_item {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 50%;

      img {
        width: 12px;
        height: 16px;
        display: block;
      }
      &:hover{
        background-color: #F1FBF7;
        // background-color: #f7f8fa;
      }
    }
  }
}
</style>