vue使用swaper实现横线时间轴

实现效果如下图

点击按钮左右滚动，每次滚动一页；实际实现思路，使用swaper一次显示多个slide，每个slide的左右间距调整为0

前期安装 swiper vue组件官网

# 安装element plus
npm install element-plus --save

# 安装swiper
npm i swiper

• 使用element plus按钮触发swiper的 mySwiper.slideNext(speed, runCallbacks) 实现左右滚动，官网方法地址

• 因为使用的swiper的vue组件，暂时没找到该组件的此api，所以使用获取swiper组件实例，再从中调用 slidePrev() 、 slideNext() 切换组件的slider

代码如下

<template>
  <!-- 时间线 -->
    <div class="development-process">
      <el-button :icon="ArrowLeft" @click="dvpLast" circle />
      <swiper :slidesPerView="6" :spaceBetween="0" ref="dvpswiper">
        <swiper-slide v-for="item in developList" :key="item.date">
          <div class="time-line">
            <span class="point"></span>
            <span class="line"></span>
          </div>
          <div class="date">{{ item.date }}</div>
          <div class="text" v-html="item.text"></div>
        </swiper-slide>
      </swiper>
      <el-button :icon="ArrowRight" @click="dvpNext" circle />
    </div>
</template>
<script>
 // 引入swaper
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper'; // 自动播放
// 引入swaper样式
import 'swiper/css';
import 'swiper/css/navigation';
// 模块引入element plus
import { ElButton, ElTable, ElTableColumn } from 'element-plus';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
export default {
  // 注册
  components: {
    Swiper,
    SwiperSlide,
    ElButton,
    ElTable,
    ElTableColumn,
  },
  setup() {
    return {
      ArrowLeft,
      ArrowRight,
      modules: [Autoplay],
    };
  },
  data(){
    return {
      dvpswiper: null, // swaper组件实例
      developList: [
        {
          date: '2014',
          text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        },
        {
          date: '2015',
          text: 'xxxxxxxxxxxxxxxxxxxxxx。。',
        },
        {
          date: '2016',
          text: 'xxxxxxxxxxxxxxx',
        },
        {
          date: '2017',
          text: 'xxxxxxxxxxx',
        },
        {
          date: '2018',
          text: 'xxxxxxxxxxxxxx',
        },
        {
          date: '2019',
          text: 'xxxxxxxxxxx',
        },
        {
          date: '2020',
          text: 'xxxxxxxxxxx',
        },
        {
          date: '2021',
          text: 'xxxxxxxxxxx',
        },
        {
          date: '2022',
          text: 'xxxxxxxxxxx',
        },
        {
          date: '2023',
          text: 'xxxxxxxxxxx',
        },
      ],
    }
  },
  mounted() {
    // 将swaper实例赋值给devswiper
    this.dvpswiper = this.$refs.dvpswiper.$el.swiper
  },
  methods: {
    // 左右按钮点击事件，出发swiper切换方法，swiper左右滑动
    dvpLast() {
      this.dvpswiper.slidePrev();
    },
    dvpNext() {
      this.dvpswiper.slideNext();
    },
  }
}
</script>
<style scoped lang="scss">
  // 时间轴
  .development-process {
    padding: 0 252px;
    display: flex;
    align-items: center;
    .el-button {
      color: #004ea2;
    }
    .swiper {
      margin: 0 50px;
    }
    .time-line {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      .point {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: blue;
      }
      .line {
        display: inline-block;
        width: 200px;
        border-top: 1px dashed #1157a3;
      }
    }
    .date {
      width: 64px;
      height: 32px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #343a40;
      line-height: 32px;
      border-radius: 4px;
      background-color: pink;
      border: 1px solid #ffffff;
      box-shadow: 0px 5px 20px 0px #d0e4fb;
    }
    .text {
      margin-top: 20px;
      max-width: 150px;
      word-break: break-all;
      color: #495057;
    }
  }
</style>

swpier 的vue组件可能会在将来删除，可使用 Swiper Vue.js Components(swiperjs.com/vue) 代替，应该就不用这么拙劣的去拿实例再调用方法了😂