Use vue3-seamless-scroll seamless scroll plugin in Vue3 project

foreword

If there is a need, you need to use the seamless scrolling plug-in (vue3-seamless-scroll) designed by this thigh. The effect is good. Record the use process. This plug-in does not require global references, but only local references to the page. There are three main steps, namely introduction, registration, and use.

1. Document address

https://github.com/xfy520/vue3-seamless-scroll
https://gitee.com/longxinziyan/vue3-seamless-scroll

2. Example code

（1）/src/views/Example/SeamlessScroll/index.vue

<template>
  <vue3-seamless-scroll
    class="v-s-s"
    :list="list"
    :step="1"
    :hover="true"
  >
    <div class="v-s-s_item" v-for="(item, index) in list" :key="index">
      <span>{
   
   { item.title }}</span>
      <span>{
   
   { item.date }}</span>
    </div>
  </vue3-seamless-scroll>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

export default {
  components: {
    Vue3SeamlessScroll,
  },
  setup() {
    const state = reactive({
      list: [
        { title: '无缝滚动第一行无缝滚动第一行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第二行无缝滚动第二行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第三行无缝滚动第三行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第四行无缝滚动第四行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第五行无缝滚动第五行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第六行无缝滚动第六行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第七行无缝滚动第七行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第八行无缝滚动第八行', date: '2023-5-10 18:09:22' },
        { title: '无缝滚动第九行无缝滚动第九行', date: '2023-5-10 18:09:22' },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="less" scoped>
  .v-s-s {
    height: 200px;
    width: 500px;
    margin: 100px auto;
    overflow: hidden;
    font-size: 13px;

    .v-s-s_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 0;
    }
  }
</style>

3. Operation effect