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