<div class="messageList">
<el-scrollbar style="height: 450px;"> <!-- 滚动条 -->
<div class="messageBody" v-for="(item,index) in messageList" :key="index">
<span class="username">{{item.name}}</span>
<span class="text">{{item.message}}</span>
</div>
</el-scrollbar>
</div>
.messageList{
height: 60%;
/deep/.el-scrollbar__wrap
{
overflow-x: hidden;
}
}
注意,最外层要用父盒子包裹
本文介绍了一个基于Vue的消息列表组件的设计与实现,详细展示了如何使用滚动条优化长列表的展示效果,确保用户在查看大量信息时的体验。通过v-for循环渲染消息列表,结合样式调整,实现了高效且美观的消息展示。

9575

被折叠的 条评论
为什么被折叠?



