这篇文章主要介绍“vue怎么实现列表垂直无缝滚动”，在日常操作中，相信很多人在vue怎么实现列表垂直无缝滚动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现列表垂直无缝滚动”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
实现新闻列表的轮播（如下图）
上代码
封装的so-marquee.vue
计算
安全
数据库
网络和加速
企业服务
<template>
<div
class="marquee-wrapper"
:
>
<div
class="marquee-container"
:
:class="className"
>
<ul
ref="marqueeCon"
:id="tooltipId"
class="marquee-content"
:class="{ anim: animate === true}"
@mouseenter="handleStop()"
@mouseleave="handleUp()"
>
<li
v-for="(item,index) in realData"
:key="`${tooltipId}-${item.id}-${index}`"
class="marquee-item"
:
@click="handleClick(item)"
>
<slot name="itemCon" :item="item"></slot>
</li>
</ul>
</div>
</div>
</template>
<script>
import { parseToNum, generateId } from '@/utils/util'
export default {
name: "so-marquee",
props: {
/*
* 可接受传参
* data 列表数据
* className 自定义类名
* width 列表宽度，默认值：400
* height 列表高度,默认值：200
* showNumber 可视的条目数，默认值：5
* speed 轮播速度，默认值：1000
* */
//列表数据
data: {
type: Array,
default: () => [],
},
//自定义类名
className: String,
//列表宽度，默认值：400
width: {
type: [Number, String],
default: 400
},
//列表高度,默认值：200
height: {
type: [Number, String],
default: 200
},
//可视的条目数，默认值：5
showNumber: {
type: [Number, String],
default: 5
},
//轮播速度，默认值：1000
speed: {
type: [Number, String],
default: 1000
}
},
data() {
return {
intnum: undefined,
animate: false
};
},
computed: {
tooltipId() {
return `marquee-con-${ generateId() }`;
},
realWidth() {
return parseToNum(this.width)
},
realHeight() {
return parseToNum(this.height)
},
realShowNumber() {
return parseToNum(this.showNumber)
},
realSpeed() {
return parseToNum(this.speed) < 1000 ? 1000 : parseToNum(this.speed)
},
itemHeigth() {
return this.realHeight / this.realShowNumber
},
realData() {
return JSON.parse(JSON.stringify(this.data))
}
},
mounted() {
if (this.realData.length > this.realShowNumber) {
this.scrollUp();
}
},
methods: {
scrollUp() {
// eslint-disable-next-line no-unused-vars
this.intnum = setInterval(_ => {
this.animate = true;
setTimeout(() => {
this.realData.push(this.realData[0]); // 将数组的第一个元素添加到数组的
this.realData.shift(); //删除数组的第一个元素
this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
}, this.realSpeed / 2)
this.$once('hook:beforeDestroy', () => {
this.cleanup()
})
}, this.realSpeed);
},
handleStop() {
this.cleanup()
},
handleUp() {
this.scrollUp();
},
handleClick(row) {
this.$emit('handleClick', row)
},
cleanup() {
if (this.intnum) {
clearInterval(this.intnum);
this.intnum = null;
}
}
},
beforeDestroy() {
this.cleanup();
},
deactivated() {
this.cleanup();
},
watch: {
animate(flag) {
this.marqueeCon = this.$refs.marqueeCon
if (flag) {
this.marqueeCon.style.marginTop = `-${ this.itemHeigth }px`
} else {
this.marqueeCon.style.marginTop = 0
}
},
}
};
</script>
<style scoped lang="scss">
.marquee-container {
overflow: hidden;
}
.marquee-content {
position: relative;
}
.anim {
transition: all 0.5s;
}
.marquee-item {
display: flex;
align-items: center;
justify-content: space-around;
}
</style>parseToNum方法
export function parseToNum(value) {
if (value !== undefined) {
value = parseInt(value, 10)
if (isNaN(value)) {
value = null;
}
}
return value
}generateId 方法
export const generateId = function() {
return Math.floor(Math.random() * 10000);
};父组件调用
<template>
<div id="app">
<so-marquee
:data="jsonData"
:height="200"
:showNumber="4"
:speed="500"
class="my-ui-marquee"
@handleClick="handleMarqueeClick"
>
<template v-slot:itemCon="{item}">
<div>{{ item.id }}</div>
<div>{{ item.name }}</div>
<div>{{ item.date }}</div>
</template>
</so-marquee>
</div>
</template>
<script>
import soMarquee from './components/so-marquee'
export default {
name: 'App',
data() {
return {
jsonData: [
{
id: 1,
name: "开会通知",
date: "2020-02-01"
},
{
id: 2,
name: "放假通知",
date: "2020-02-02"
},
{
id: 3,
name: "停水通知",
date: "2020-02-03"
},
{
id: 4,
name: "停电通知",
date: "2020-02-04"
},
{
id: 5,
name: "停车通知",
date: "2020-02-05"
},
{
id: 6,
name: "奖励通知",
date: "2020-02-06"
},
{
id: 7,
name: "处分通知",
date: "2020-02-07"
},
{
id: 8,
name: "处分8通知",
date: "2020-02-08"
},
{
id: 9,
name: "处分9通知",
date: "2020-02-09"
},
{
id: 10,
name: "处分10通知",
date: "2020-02-10"
},
]
}
},
components: {
soMarquee
},
methods: {
handleMarqueeClick(row) {
alert(`当前点击的第${row.id}行`)
}
}
}
</script>
<style scoped lang="scss">
.my-ui-marquee {
::v-deep.marquee-item {
cursor: pointer;
}
}
</style>到此，关于“vue怎么实现列表垂直无缝滚动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
