【用vue的transition-group实现列表循环】

最新推荐文章于 2025-04-07 20:08:25 发布

瘦肥西

最新推荐文章于 2025-04-07 20:08:25 发布

阅读量839

点赞数 2

文章标签： vue.js css3 javascript

本文链接：https://blog.youkuaiyun.com/lruri_wss/article/details/122621031

版权

本文介绍如何利用vue的transition-group组件创建一个从底部进入上部消失的列表循环效果，包括页面代码结构和数据处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用vue的transition-group实现列表循环

类似于从底部进入上部消失的效果
在这里插入图片描述

1.页面代码

<div class="party-table">
      <div class="head">
          <p class="col">小区党支部</p>
          <p class="col">参与时间</p>
          <p class="col">参与活动</p>
      </div>
      <div ref="scroll" class="seamless-warp">
          tag="ul" //列表的标签名
          :key="item.pindex"//key值是唯一的
          <transition-group name="list" tag="ul">
              <li
                  v-for="item in partyList"
                  :key="item.pindex"
                  class="list-complete-item"