表格高亮滚动

Question

这种在大屏上隔一段时间高亮一下并且有滚动效果的如何实现。

<div class="Subtitle">
    <img src="./images/slash.png">
    <span>排名(TOP10)</span>
</div>
<div class="tableShow">
    <ul class="thead">
        <li style="width: 50%;">排名</li>
        <li style="width: 50%;">高工伤风险单位</li>
    </ul>
    <div class="tbody">
        <div class="scroll-wrap" style="height: .9875rem;">
            <ul class="scroll-content flexDiv" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()" v-for="(item, i) in gs_fxdw">
                <li style="width: 50%;">
                    {{ i + 1 }}
                </li>
                <li style="width: 50%;">{{ item.ggsfxdw }}</li>
            </ul>
        </div>
    </div>
</div>

目前只实现了滚动

Answer 1

用swiper可以满足你的要求，设置纵向滚动、设置多个slides显示、设置自动滚动、最后给当前项设置高亮样式

用法见官方： https://www.swiper.com.cn/dem...