vue项目中实现无缝轮播并动态更新数据

最新推荐文章于 2024-08-29 11:01:36 发布

小静仔

最新推荐文章于 2024-08-29 11:01:36 发布

阅读量5.8k

点赞数 2

本文链接：https://blog.csdn.net/shelbyandfxj/article/details/95110990

版权

本文介绍在Vue项目中实现无缝轮播的方法，通过克隆节点确保数据动态更新。通常的做法是利用CSS的transition和transform，但在数据更新时可能会遇到问题。为解决这个问题，可以将实际数据直接拼接到末尾，从而保持数据同步。文中还提到在有分页器的情况下可能出现的过渡bug，并提供了解决方案：先跳转到克隆页，然后延迟切换到第一页，再延迟过渡到目标页。欢迎大家讨论和分享更好的实现方式。

摘要由CSDN通过智能技术生成

<template>
    <div class="chart-out-wrapper">
      <div class="chart-wrapper"
           ref="swiper"
           @mouseover="mouseHover"
           @mouseout="mouseOut"
      >
        <barChart v-for="(item, index) in categoryDataList"
                  :key="index"
                  class="chart-size"
                  :chartData="item"
                  :chartLeft="20"
                  :color="linearColor[index]"
                  ref="barchart"
        >
        </barChart>
        <barChart class="chart-size"
                  :chartData="categoryDataList[0]"
                  :chartLeft="20"
                  :color="linearColor[0]"
                  ref="barchart"
        >
        </barChart>
      </div>
    </div>
</template>

<script>
  import barChart from './barChart'

  export default {
    name: 'chart',
    components: {
      barChart
    },
    props: {
      categoryDataList: {
        type: Array,
        default: function () {
            return []
        }
      }
    },
    data() {
      const self = this
      return {
        activeChartIndex: 0,
        linearColor: [
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: '#394FFD' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#0AFFC5' // 100% 处的颜色
          }], f