vue怎么实现列表垂直无缝滚动

这篇文章主要介绍“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: {            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怎么实现列表垂直无缝滚动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！