1.使用vue-seamless-scroll实现无缝滚动效果

如图：

使用教程文档：Installation | vue-seamless-scroll (chenxuan0000.github.io)

完整代码实例 ：

<template>
 <div id="container">
<vue-seamless-scroll :data="listData" class="warp"
>
<ul class="item">
  <li v-for="(item, index) in listData" :key="index" :class="[index%2==0?'activeClass':'']">
    <span>{{index}}</span>
    <span>{{item.date}}</span>
    <span>{{item.date}}</span>
  </li>
</ul>
</vue-seamless-scroll>
</div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
  vueSeamlessScroll
},
data() {
return {
  
  listData: [{
      'title': '无缝滚动第一行无缝滚动第一行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第二行无缝滚动第二行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第三行无缝滚动第三行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第四行无缝滚动第四行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第五行无缝滚动第五行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第六行无缝滚动第六行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第七行无缝滚动第七行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第八行无缝滚动第八行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第九行无缝滚动第九行',
      'date': '2017-12-16'
    },{
      'title': '无缝滚动第一行无缝滚动第一行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第二行无缝滚动第二行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第三行无缝滚动第三行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第四行无缝滚动第四行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第五行无缝滚动第五行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第六行无缝滚动第六行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第七行无缝滚动第七行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第八行无缝滚动第八行',
      'date': '2017-12-16'
    }, {
      'title': '无缝滚动第九行无缝滚动第九行',
      'date': '2017-12-16'
    }],
};
},
computed: {
classOption() {
  return {
    direction: 1,
  };
 },
},
};
</script>

<style lang="less" scoped>
#container {
padding: 12px 8px;
color: #fff;
height: 100%;
.warp {
height: 312px;
margin: 0 auto;
overflow: hidden;
}
h1 {
color: #fff;
}
ul {
padding: 0;
li {
  height: 30px;
  background: #0b2383;
  padding: 0 5%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span:nth-of-type(1) {
    color: #fff;
  }
  span:nth-of-type(2) {
    color: #fff;
  }
  span:nth-of-type(3) {
    color: #129388;
  }
}
.activeClass {
  background: linear-gradient(to right, #0396d2, #10328c);
}
}
}
</style>

2.使用vue-awesome-swiper实现滚动效果

流程：npm i swiper vue-awesome-swiper@4 网站：vue-awesome-swiper - npm (npmjs.com)

完整代码实例：

<template>
<div class="section1 flex-col">
<div class="mod2 flex-col justify-between">
  <div class="section2 flex-col">
    <span class="word4">保险政策汇编</span>
  </div>
  <div class="table-wrapper">
    <div class="table-content">
      <swiper class="swiper" :options="swiperOption" ref="myBotSwiper">
        <swiper-slide v-for="(it, i) in homelist" :key="i">
          <div
            class="table-row"
            :class="{
              activeClass: i % 2 == 1,
            }"
            @click="handleRowClick(it, i)"
          >
            <span v-for="(ite, ind) in 2" :key="ind" :title="it[ind]">{{
              it[ind]
            }}</span>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "swiper-table",
  components: {
    Swiper,
SwiperSlide,
  },
directives: {
swiper: directive,
},
computed: {
myBotSwiper() {
  return this.$refs.myBotSwiper.$swiper;
},
},
data() {
return {
   homelist:[
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
   ['xxxxxxxxxxxxxxxxxx','2021flsdjffd','https://www.baidu.com/'],
  ],
  currentActiveRow: 0,
  swiperOption: {
    autoHeight: true,
    direction: "vertical",
    spaceBetween: 0,
    autoplay: {
      delay: 1000,
      disableOnInteraction: false,
      autoplayDisableOnInteraction: false,
    },
    slidesPerView: "auto",
    grabCursor: true,
    autoplayDisableOnInteraction: false,
    mousewheelControl: true,
  },
};
},
methods: {
// handleRowClick(it, i){
 
// },
// 控制表格停止滚动
swiperStop() {
  this.myBotSwiper.autoplay.stop();
},
// 控制表格开始滚动
swiperStart() {
  this.myBotSwiper.autoplay.start();
},
},
};
</script>

 <style lang="less" scoped>
.table-wrapper {
width: 100%;
height: 155px;
color: #fff;
padding-top: 10px;
.table-content {
width: 100%;
height: 155px;
.swiper {
  width: 100%;
  height: 100%;
  .table-row {
    width: 100%;
    height: 30px;
    opacity: 0.8;
    border: 1px solid;
    border-image: linear-gradient(
        89deg,
        rgba(61, 127, 255, 0),
        rgba(61, 117, 255, 0.7),
        rgba(65, 136, 255, 1),
        rgba(61, 117, 255, 0.5),
        rgba(61, 127, 255, 0)
      )
      1 1;
    cursor: pointer;
    padding: 0 5%;
  }
}
}
}

</style>