基于vue3实现的vue3-seamless-scroll无缝滚动

原创

用户6682160

修改于 2021-08-30 11:20:24

4K0

修改于 2021-08-30 11:20:24

文章被收录于专栏：日常问题记录

项目地址

GitHub

Gitee

安装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";
  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>