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

原创已于 2025-01-06 15:52:12 修改 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #html

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

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

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

}