代码拉取完成，页面将自动刷新
Vue3.0 无缝滚动组件
目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，组件支持原生
css3动画滚动，目前组件支持平台与Vue3.0支持平台一致。
1.0.7版本已不再需要单独引入样式文件
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/lib/vue3SeamlessScroll.umd.min.js"></script>
datas
无缝滚动列表数据，组件内部使用列表长度。
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
limitScrollNum
开启滚动的数据量，只有列表长度大于等于该值才会滚动
type: [Number, String],
default: 5,
required: false
step
步进速度
type: [Number, String],
required: false
当使用原生css3动画滚动组件时，单步滚动控制需要
duration与step两个参数协调使用
需要滚动的列表所在容器必须设置样式
overflow: hidden;
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');
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');
<script>
import { defineComponent } from "vue";
import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
components: {
jsSeamlessScroll,
cssSeamlessScroll
}
})
</script>
<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-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>
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({
scroll: true,
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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手