项目地址GitHubGitee安装vue3-seamless-scrollnpm install vue-seamless-scroll --save 参数配置文档地址GitHub与Gitee注册组件全局注册 import { createApp } from 'vue'; import App from './App.vue'; import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll"; 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版效果
