关于vue.js:基于vue3实现的vue3seamlessscroll无缝滚动

装置vue3-seamless-scroll

npm install vue-seamless-scroll --save　　

注册组件

• 全局注册

  import { createApp } from 'vue';
  import App from './App.vue';
  import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
  import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css"
  const app = createApp(App);
  app.use(cssSeamlessScroll);
  app.use(jsSeamlessScroll);
  app.mount('#app');

• 单文件注册

  <template>
  </template>
  <script>
    import { defineComponent } from "vue";
    import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
    import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css"
     export default defineComponent({
        components: {
          jsSeamlessScroll,
          cssSeamlessScroll
        }
     })
  </script>

应用组件

<template>
  <js-seamless-scroll :datas="datas" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </js-seamless-scroll>
  <css-seamless-scroll :datas="datas" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
  name: "App",
  components: {
    jsSeamlessScroll,
    cssSeamlessScroll
  },
  setup() {
    const state = reactive({
      datas: [
        {
          title: "Vue3.0 无缝滚动组件展现数据第1条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第2条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第3条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第4条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第5条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第6条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第7条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第8条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展现数据第9条",
          date: Date.now(),
        },
      ]
    });
    return { ...toRefs(state) };
  },
});
</script>
<style>
.scroll {
  height: 270px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}
.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>

展现成果

• JS版成果

• CSS3版成果