vue3让元素内容无限滚动

vue3让元素内容无限滚动

详情请看开源项目

vue3-seamless-scroll目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，组件支持原生 css3动画 滚动，目前组件支持平台与Vue3.0支持平台一致。

注意项
当使用原生css3动画滚动组件时，单步滚动控制需要duration与step两个参数协调使用
需要滚动的列表所在容器必须设置样式 overflow: hidden;

安装方法：
npm
npm install vue3-seamless-scroll --save
Yarn
yarn add vue3-seamless-scroll

引入方法
两种方式做无限滚动动画 jsSeamlessScroll, cssSeamlessScroll，引入一种即可

// 全局单个组件注册 install
// main.js
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');

// 单个.vue文件局部注册
<script>
  import { defineComponent } from "vue";
  import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
      components: {
        jsSeamlessScroll,
        cssSeamlessScroll
      }
   })
</script>

  // 对应配置项
  //datas：无缝滚动列表数据，组件内部使用列表长度。
  type: Array
  required: true

  //v-model：通过v-model控制动画滚动与停止，默认开始滚动
  type: Boolean,
  default: true,
 
  //direction：控制滚动方向，可选值up，down，left，right
  type: String,
  default: "up",
  required: false

  //isWatch：开启数据更新监听
  type: Boolean,
  default: true,
  required: false

  //hover：是否开启鼠标悬停
  type: Boolean,
  default: false,
  required: false

  //limitScrollNum：开启滚动的数据量，只有列表长度大于等于该值才会滚动
  type: [Number, String],
  default: 5,
  required: false

  //step：步进速度
  type: [Number, String],
  required: false

// 使用组件
<!-- js -->
<template>
    <js-seamless-scroll :datas="datas" v-model="scroll" 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 -->
    <css-seamless-scroll :datas="datas" v-model="scroll" 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 setup>
import { reactive , ref } from "vue";
import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";

const scroll=ref(true)
const datas = reactive(
       [
        {
          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(),
        },
      ]
),
</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>