点击左右移动列表

默认显示五张卡片

<template>

  <div class="cardDrawer">

    <div class="cardDrawer__container">

      <el-button v-if="isScroll" type="text" class="cardDrawer__container__left" @click="scrollList('left')"><i class="el-icon-arrow-left" /></el-button>

      <div class="cardListsContainer">

        <div ref="cardLists" class="cardDrawer__container__list">

          <!-- 这里面放卡片列表div, v-for巴拉巴拉 -->

          <cardList :list="leftList" />

          <cardList :list="rightList" />

        </div>

      </div>

      <el-button v-if="isScroll" type="text" class="cardDrawer__container__right" @click="scrollList('right')"><i class="el-icon-arrow-right" /></el-button>

    </div>

  </div>

</template>

<script>

import cardList from './components/cardList'

export default {

  components: { cardList },

  props: {

    leftList: {

      type: Array,

      default: () => []

    },

    rightList: {

      type: Array,

      default: () => []

    }

  },

  data() {

    return {

      cardWidth: 240 // 点击一次按钮移动的距离

    }

  },

  computed: {

    // 是否显示左右移动按钮

    isScroll() {

      const leftLength = this.leftList.length

      const rightLength = this.rightList.length

      let length = leftLength + rightLength

      // 如果两个卡片列表都为空，显示一个empty图片，占一张卡片的长度

      if (leftLength === 0 && rightLength === 0) length = 1

      if (length >= 6) return true

      else return false

    }

  },

  methods: {

    // 列表移动

    scrollList(type) {

      const { cardWidth } = this

      const marginLeft = this.$refs.cardLists.style.marginLeft

      const currentWidth = marginLeft ? marginLeft.match(/(\S*)px/)[1] : 0 // 当前margin-left

      const minNum = 5 // 默认时展示的完整卡片数量

      const maxWidth = (this.leftList.length + this.rightList.length - minNum) * cardWidth

      if (type === 'left') {

        if (Number(currentWidth) >= 0) return

        // console.log('左移列表')

        const marginLeft = Number(currentWidth) + cardWidth

        this.$refs.cardLists.style.marginLeft = marginLeft + 'px'

      }

      if (type === 'right') {

        // console.log('右移列表')

        if (Number(currentWidth) <= -maxWidth) return

        const marginLeft = Number(currentWidth) - cardWidth

        this.$refs.cardLists.style.marginLeft = marginLeft + 'px'

      }

    }

  }

}

</script>

<style lang="scss" scoped>

.cardDrawer {

  height: 100%;

  background-color: #f7f9fd;

  padding: 10px 0;

  &__container {

    width: 1460px;

    margin: auto;

    color: #999999;

    display: flex;

    justify-content: space-between;

    align-items: center;

    &__list {

      width: 100%;

      display: flex;

      justify-content: flex-start;

      transition: margin-left 0.3s 0s;

    }

  }

}

.cardListsContainer {

  width: 1408px;

  overflow: hidden;

}

</style>