🔮 欢迎点赞 👍٩( ´︶` )( ´︶` )۶ 收藏 🌟留言 💌 欢迎讨论!💕
🔮 本文由 【第四人称Alice】 原创,首发于 CSDN ✨✨✨
🌍 由于博主还属于前期的前端开发小白,欢迎大家留言提出更好的意见,大家共同进步!💭
声明:博主的项目是vue3+ts,node版本18.18.2
一、介绍
Vue3.0 无缝滚动组件,支持Vite2.0,支持服务端打包、支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,目前组件支持平台与Vue3.0
支持平台一致。
二、安装
npm install vue3-seamless-scroll --save
三、效果图
四、模板中使用
1、局部使用
<template>
<div>
<div class="scroll-list">
<p>局部使用</p>
<div class="scrollBox">
<vue3-seamless-scroll :list="scrollListArr" class="scroll" v-if="scrollFlag" :step="0.5">
<div v-for="(item, index) in scrollListArr" :key="item.id">
<span>{{ item.description }}</span>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
</template>
<style lang="less">
.scrollBox {
border: 2px solid #f42600;
padding: 6px 0;
width: 300px;
margin: 0 auto;
height: 190px;
}
.scroll {
height: 190px;
overflow: hidden;
line-height: 38px;
}
</style>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getScrollList } from "@/api/getList";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
let scrollListArr = reactive<any>([]);
let scrollFlag = ref(false);
const getList = async () => {
//根据实际情况调取相应列表接口
let res = await getScrollList();
let data = res.data;
if (data.code == 200) {
scrollListArr = data.data;
scrollFlag.value = true;
}
};
getList();
</script>
2、全局使用
main.ts文件
import vue3SeamlessScroll from 'vue3-seamless-scroll';
const app = createApp(App);
app.use(vue3SeamlessScroll, { name: "seamless-scroll" });
app.use(router).mount("#app");
组件文件中
<template>
<div>
<vue3-seamless-scroll :list="scrollListArr" class="scroll" :step="0.5">
<div v-for="(item, index) in scrollListArr" :key="item.id">
<span>{{ item }}</span>
</div>
</vue3-seamless-scroll>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const scrollListArr=[0,1,2,3,4]
</script>
<style lang="less">
.scrollBox {
border: 2px solid #f42600;
padding: 6px 0;
width: 300px;
margin: 0 auto;
height: 190px;
}
.scroll {
height: 190px;
overflow: hidden;
line-height: 38px;
}
</style>
五、配置参数
参数名称 | 参数介绍 | 默认值 | 参数类型 | 是否必传 |
---|---|---|---|---|
list | 无缝滚动列表数据,组件内部使用列表长度。 | 无 | Array | true |
v-model | 通过v-model控制动画滚动与停止,默认开始滚动 | true | Boolean | false |
direction | 控制滚动方向,可选值up ,down ,left ,right | up | String | false |
isWatch | 开启数据更新监听 | true | Boolean | false |
hover | 是否开启鼠标悬停 | false | Boolean | false |
count | 动画循环次数,默认无限循环 | infinite | Number | false |
limitScrollNum | 开启滚动的数据量,只有列表长度大于等于该值才会滚动 | 5 | false | false |
step | 步进速度 | 无 | Number | false |
singleHeight | 单步运动停止的高度 | 0 | Number | false |
singleWidth | 单步运动停止的宽度 | 0 | Number | false |
singleWaitTime | 单步停止等待时间(默认值 1000ms) | 1000 | Number | false |
isRemUnit | singleHeight and singleWidth 是否开启 rem 度量 | true | Boolean | false |
delay | 动画延时时间 | 0 | Number | false |
ease | 动画效果,可以传入贝塞尔曲线数值 | ease-in | String | cubic-bezier | false |
copyNum | 拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果 | 1 | Number | false |
wheel | 在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启 | false | Boolean | false |
singleLine | 启用单行横向滚动 | false | Boolean | false |
注意:需要滚动的列表所在容器必须设置样式
overflow: hidden
;
贝塞尔曲线待补充...