关于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 版成果