乐趣区

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

  1. 装置 vue3-seamless-scroll

    npm install vue-seamless-scroll --save  
  2. 参数配置文档地址 GitHub 与 Gitee
  3. 注册组件

    • 全局注册

      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>
  4. 应用组件

    <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>
  5. 展现成果

    • JS 版成果

    • CSS3 版成果

退出移动版