Vue3 プロジェクトで vue3-simless-scroll シームレス スクロール プラグインを使用する

序文

必要に応じて、この太ももが設計したシームレススクロールプラグイン (vue3-simless-scroll) を使用する必要があります。効果は良好です。使用プロセスを記録します。このプラグインはグローバル参照を必要とせず、ページへのローカル参照のみを必要とし、主に導入、登録、使用の 3 つのステップがあります。

1. 書類の住所

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

2. コード例

（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. 運用効果