在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件

飞熊 • 2023年7月24日下午10:19 • 后端漫谈 • 阅读 839

有需求需要用到这个大腿们设计的无缝滚动插件（vue3-seamless-scroll），效果不错，记录一下使用过程。本插件不需要全局引用，只需要局部引用到页面中即可，主要有三个步骤，分别是引入、注册、使用。

一、源码和文档地址

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

二、示例代码（/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>

三、效果如下 ~