vue实现文本上下循环滚动

2023-12-20 19:29:18

前言

页面上有两块公告，需要循环滚动，最初使用animation实现了，但如果两块公告的条数不一致的话，就会导致两块公告滚动的快慢不同，由此需要换种方式实现，使两块公告始终以同样的快慢节奏滚动。

第一种方式：animation实现（存在两块公告滚动的快慢不同的问题）

<!-- 公告1 -->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list.length > 3" class="list">
        <li v-for="(item, index) in list" :key="'list'+index">{
  {item.name}}</li>
    </ul>
    <!-- 小于于3条 -->
    <ul v-else>
       <li v-for="(item, index) in list" :key="'list'+index">{
  {item.name}}</li>
    </ul>
</div>
<!-- 公告2-->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list2.length > 3" class="list2">
        <li v-for="(item, index) in list

文章来源:https://blog.csdn.net/xuaner8786/article/details/135111943
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。