vue实现列表无缝衔接滚动、vue-seamless-scroll

---

1、下载及详细文档

目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能，官方文档。

---

2、默认示例

<template>
  <vue-seamless-scroll :data="listData" class="warp">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="title" v-text="item.title">span>
        <span class="date" v-text="item.date">span>
      li>
    ul>
  vue-seamless-scroll>
template>

---

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'Example01Basic',
  components: {
    vueSeamlessScroll
  },
  data () {
    return {
      listData: [{
        'title': '无缝滚动第一行无缝滚动第一行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第二行无缝滚动第二行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第三行无缝滚动第三行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第四行无缝滚动第四行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第五行无缝滚动第五行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第六行无缝滚动第六行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第七行无缝滚动第七行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第八行无缝滚动第八行',
        'date': '2023-04-02'
      }, {
        'title': '无缝滚动第九行无缝滚动第九行',
        'date': '2023-04-02'
      }],
    }
  },
}

---

.warp {
  height: 270px;
  width: 360px;
  margin: 0 auto;
  overflow: hidden;
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    
    li,
    a {
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}