element-plus走马灯

实现效果

成都大屏——经济发展

代码实现

目录结构

1. 数据处理
   对于这种张幻灯片包含多个item的，要先对数据进行分组处理

const focusListGroups = computed(() => {
    const groups = []
    const groupSize = 2 // 每组2个
    for (let i = 0; i < state.list.length; i += groupSize) {
      groups.push(state.list.slice(i, i + groupSize))
    }
    return groups
  })

slice用于从数组中提取指定的元素，并将这些元素放入一个新的数组中返回

2. 遍历渲染
   要通过2层循环，来遍历
   外层遍历的group相当于若干幻灯片中的一张
   内层的 item相当于一张幻灯片里包含的其中一个元素
   所以，只要2层循环

<el-carousel height="172px" arrow="always" indicator-position="none">
        <el-carousel-item v-for="(group, index) in economyListGroups" :key="'group' + index">
          <div class="groupbox">
            <EconomyItem v-for="(item, index) in group" :key="'item' + index" :data="item"></EconomyItem>
          </div>
        </el-carousel-item>
      </el-carousel>

3. style

<style scoped>
  :deep(.el-carousel__arrow--left) {
    left: -10px;
  }
  :deep(.el-carousel__arrow--right) {
    right: -3px;
  }
  :deep(.el-carousel__arrow--left i) {
    width: 13px;
    height: 16px;
    background-image: url('@/assets/ScreenLeft/arrowIconLeft.png');
  }
  :deep(.el-carousel__arrow--right i) {
    width: 13px;
    height: 16px;
    background-image: url('@/assets/ScreenLeft/arrowIconRight.png');
  }
  :deep(.el-icon svg) {
    opacity: 0;
  }
</style>

4. 下面小点点的样式

<style scoped>
  :deep(.el-carousel__indicator--horizontal) {
    top: 200px;
    display: inline-block;
    margin-bottom: -10px;

    /* background-color: red; */

    /* padding: var(--el-carousel-indicator-padding-vertical) var(--el-carousel-indicator-padding-horizontal); */
  }
  :deep(.el-carousel__button) {
    width: 15px;
    height: 3px;
    background-color: #00bdff;
    border-radius: 10px;
  }
</style>