vue移动端实现折叠/展开列表支持内部滚动

韶华轻负

已于 2025-01-06 15:52:12 修改

阅读量811

点赞数

CC 4.0 BY-SA版权

文章标签： css vue.js html

于 2021-08-09 17:22:04 首次发布

本文链接：https://blog.youkuaiyun.com/derek_chou/article/details/119542424

这篇博客探讨了如何在Vue项目中利用CSS的过渡效果创建一个可折叠的面板。通过绑定类名和V-for指令，动态改变面板的最大高度，实现了平滑的展开和关闭动画。该技巧在前端开发中常用于优化用户体验。

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

html:

<div class="fold" :class="[flag?'open':'close']">

        <div v-for="(item,index) in list" :key="index">

                ...       

        </div>

</div>

css:

.fold{

        overflow:hidden;

        transition:max-height 0.5s ease-in-out;//监听max-height变化，实现动画

        overflow-y:auto;

}

.open{

        max-height:200px

}

.close{

        max-height:0

}