大屏可视化项目之vue3-seamless-scroll无缝滚动组件(一)——基本使用
作者:互联网
大屏可视化项目之vue3-seamless-scroll无缝滚动组件(一)——基本使用
vue3-seamless-scroll官网地址——Vue3.0 无缝滚动组件,支持Vite2.0
https://www.npmjs.com/package/vue3-seamless-scroll
效果图
1、安装
-
npm
npm install vue3-seamless-scroll --save
-
Yarn
yarn add vue3-seamless-scroll
-
browser
<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"></script>
2、使用
2.1、注册组件
- 全局组件注册
install
// **main.js**
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');
- 单个.vue文件局部注册
<script>
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
components: {
Vue3SeamlessScroll
}
})
</script>
2.2、使用组件
<template>
<vue3-seamless-scroll :list="list" class="scroll">
<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>
import { defineComponent, ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
name: "App",
components: {
Vue3SeamlessScroll
},
setup() {
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(),
},
]);
return { list };
},
});
</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>
3、组件配置
-
list
无缝滚动列表数据,组件内部使用列表长度。
type: Array required: true
-
v-model
通过v-model控制动画滚动与停止,默认开始滚动
type: Boolean, default: true, required: false
-
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
-
count
动画循环次数,默认无限循环
type: Number, default: "infinite", required: false
-
limitScrollNum
开启滚动的数据量,只有列表长度大于等于该值才会滚动
type: Number, default: 5, required: false
-
step
步进速度
type: Number, required: false
-
singleHeight
单步运动停止的高度
type: Number, default: 0, required: false
-
singleWidth
单步运动停止的宽度
type: Number, default: 0, required: false
-
singleWaitTime
单步停止等待时间(默认值 1000ms)
type: Number, default: 1000, required: false
-
isRemUnit
singleHeight and singleWidth 是否开启 rem 度量
type: Boolean, default: true, required: false
-
delay
动画延时时间
type: Number, default: 0, required: false
-
ease
动画效果,可以传入贝塞尔曲线数值
type: String | cubic-bezier, default: "ease-in", required: false
4、注意项
需要滚动的列表所在容器必须设置样式
overflow: hidden
;
标签:false,default,required,seamless,组件,vue3,大屏,滚动,type 来源: https://blog.csdn.net/weixin_44867717/article/details/121521253