如上图所示，实现里面的数据滚动效果，这里我们使用了 swiper

具体代码如下，可以直接使用喔~~~

    <template>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">silide 1</div>
          <div class="swiper-slide">silide 2</div>
          <div class="swiper-slide">silide 3</div>
          <div class="swiper-slide">silide 4</div>
          <div class="swiper-slide">silide 5</div>
          <div class="swiper-slide">silide 6</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
    </template>
    
    <script>
    import Swiper from 'swiper'
    import Vue from 'vue'
    export default {
      name: 'ReportTitle',
      data () {
        return {}
      },
      mounted () {
        this.initSwiper();
      },
      methods: {
        initSwiper () {
          new Swiper('.swiper-container', {
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            // 如果需要滚动条
            scrollbar: '.swiper-scrollbar',
          })
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    @import "../../../../../../node_modules/swiper/dist/css/swiper.css";
    .swiper-container {
      width: 58px;
      height: 30px;
      color: #fff;
    }
    
    .swiper-container::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }
    </style>