这篇文章主要介绍“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怎么实现列表垂直无缝滚动”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。