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

30次阅读

共计 1936 个字符，预计需要花费 5 分钟才能阅读完成。

装置 vue3-seamless-scroll

npm install vue-seamless-scroll --save

参数配置文档地址 GitHub 与 Gitee

注册组件

全局注册

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>