目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,目前组件支持平台与Vue3.0
支持平台一致。
官方地址
vue3参考地址 https://github.com/xfy520/vue3-seamless-scroll
vue2参考地址 04 - 滚动速度 | vue-seamless-scroll
vue2使用 vue-seamless-scroll
安装
npm install vue3-seamless-scroll --save
全局注册
import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');
局部注册 引入使用即可
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
使用
注意:需要滚动的列表所在容器必须设置样式 overflow: hidden
;
<template>
<vue3-seamless-scroll :list="list" class="scroll" :hover="true">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{item.title}}</span>
<span>{{item.date}}</span>
</div>
</vue3-seamless-scroll>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const list = ref([
{
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>
组件配置
配置参数 | 注释 | 默认值 | 类型 | 必填 |
---|---|---|---|---|
list | 无缝滚动列表数据,组件内部使用列表长度 | Array | 是 | |
v-model | 通过v-model控制动画滚动与停止 | true | Boolean | 否 |
direction | 控制滚动方向,可选值up,down,left,right | up | String | 否 |
isWatch | 开启数据更新监听 | true | Boolean | 否 |
hover | 是否开启鼠标悬停 | false | Boolean | 否 |
count | 动画循环次数,默认无限循环 | infinite | Number | 否 |
limitScrollNum | 开启滚动的数据量,只有列表长度大于等于该值才会滚动 | 5 | Number | 否 |
step | 步进速度 | Number | 否 | |
singleHeight | 单步运动停止的高度 | 0 | Number | 否 |
singleWidth | 单步运动停止的宽度 | 0 | Number | 否 |
singleWaitTime | 单步停止等待时间(默认值 1000ms) | 1000 | Number | 否 |
isRemUnit | singleHeight and singleWidth 是否开启 rem 度量 | true | Boolean | 否 |
delay | 动画延时时间 | 0 | Number | 否 |
ease | 动画效果,可以传入贝塞尔曲线数值cubic-bezier | ease-in | String | 否 |
copyNum | 拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果 | 1 | Number | 否 |
wheel | 在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启 | false | Boolean | 否 |
singleLine | 启用单行横向滚动 | false | Boolean | 否 |