【 vue/css列表无限滚动轮播，可接受动态赋值】

vue/css列表无限滚动轮播，可接受动态赋值

1.先上效果图

vue/css 列表轮播

嫌麻烦的话可以直接看源码，我博客也只是纯代码记录，没啥思想含量……
https://gitee.com/penny0906/blog-files/tree/master/infiniteScrollList

2.vue中template代码和css样式，仅做参考，数据列表项最好定义固定高度，涉及后期动画高度计算，这里我用的50px

dashboardTitle是我引用的通用头部组件，可以忽略

<!--  dashboardTitle是我引用的通用头部组件，可以忽略 -->
<template>
    <dashboardTitle title="完修量排行榜" titleTip="截至目前" :hiddenScroll="true">
        <!--  注意此处是添加 animation 动画，不可缺少 -->
        <div
            class="huazhu-ranking"
            :style="{
                animation: `scroll ${list.length}s 2s both infinite`
            }"
        >
            <div v-for="(item, index) in list" :key="index" class="item">
                <div class="rank-title">
                    <div class="rank">No.{{ item.rank }}</div>
                    <div class="name">{{ item.name }}</div>
                    <div class="num">{{ item.num }}</div>
                </div>
                <div class="slider" :style="{ width: `${(item.num / total) * 100}%` }"></div>
            </div>
            <!-- 再次重复一列，避免滑到最底部的时候底部出现空白； -->
            <!-- key做处理，避免报错duplicate key -->
            <div v-for="(item, index) in list" :key="index.toString().padStart(3, 0)" class="item">
                <div class="rank-title">
                    <div class="rank">No.{{ item.rank }}</div>
                    <div class="name">{{ item.name }}</div>
                    <div class="num">{{ item.num }}</div>
                </div>
                <div class="slider" :style="{ width: `${(item.num / total) * 100}%` }"></div>
            </div>
        </div>
    </dashboardTitle>
</template>

<style lang="scss" scoped>
.huazhu-dashboard-card .content {
    overflow-y: hidden !important;
}
.huazhu-ranking {
    padding: 0 10px;
    box-sizing: border-box;
    .item {
        height: 50px;
        padding: 4px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .rank-title {
            font-size: 12px;
            display: flex;
            align-items: center;
            .rank {
                width: 40px;
                color: var(--theme-color);
            }
            .name {
                flex: 1;
            }
        }
        .slider {
            height: 2px;
            background: var(--theme-color);
        }
    }
}
</style>

3.data中定义list数组

data() {
        return {
            total: 10000,
            list: []
        };
    },

4.created中获取数据并且要删除多余的scroll动画，否则会覆盖新的动画，动画效果混乱

created() {
        // 删除多余的之前的scroll动画，否则会覆盖新的动画
        document.styleSheets[0]?.cssRules.forEach((it, index) => {
            if (it?.name === 'scroll') {
                document.styleSheets[0].deleteRule(index);
            }
        });
        // 获取数据
        this.getRankingList();
    },

4.methods手动根据数据量添加相应动画

methods: {
        getRankingList() {
            // 模拟接口
            setTimeout(() => {
                this.list = new Array(12)
                    .toString()
                    .split(',')
                    .map((item, index) => {
                        return {
                            rank: index + 1,
                            name: '天德电器销售有限公司',
                            num: 9999 - index * 500
                        };
                    });
                // 添加动画
                this.addKeyFrames();
            }, 200);
        },
        addKeyFrames() {
            let gap = 100 / this.list.length;
            let content = new Array(this.list.length + 1)
                .toString()
                .split(',')
                .map((it, index) => {
                    return `${gap * index}% {transform: translateY(-${50 * index}px);}`;
                });
            // 写入样式
            document.styleSheets[0].insertRule(`@keyframes scroll {${content.join('')}}`);
        }
    }

5.补充碎碎念

1）这个代码滚动效果是会停顿一下的，我这边业务要求如此，如果想平滑的滚动可以把vue template中绑定的animation的both 换成 linear

:style="{animation: `scroll ${list.length}s 2s both infinite`}"

改为

:style="{animation: `scroll ${list.length}s 2s linear infinite`}"

2）竖向滚动条一般可能都会显示的，个人觉得不美观，用overflow: hidden; 隐藏了