Vue笔记--可视化大屏列表的两种形式（循环滚动、加载更多）

        可视化大屏，是管理系统项目的开发中的重要组成部分，包括了数据的图表展示，以及数据的列表展示。这篇笔记记录我上一个项目中遇到的列表的开发方法。这里有两种方案，分别是：    ‘ 循环滚动列表 ’ 和 ‘ 手动加载更多列表 ’；

        一，手动加载更多列表

1，效果图：

2，逻辑

首次进入页面，列表展示数据的前20条，（根据自己项目的需要而定啊）支持鼠标滚轮滚动控制列表上下滚动。如果服务得来的数据有20条（或者请求参数中的pageSize），则显示 “ 加载更多>>>”，用户点击加载更多，多展示后续的10条；如果服务得来的数据不足20条（或者请求参数中的pageSize），则不显示 “ 加载更多>>>”。每隔10秒，刷新一遍列表，保证新的数据展示在列表的最上方；

3，实现代码

HTML：

<div class="tableList_content_list_box">
<ul class="tableList_content_list">
    <li v-for="(item,index) in listData" :key="index">
        <!-- 项目名称 -->
        <span class="tableList_content_list_pro">{
  {item.projectName}}</span>
        <!-- 到资额（亿元） -->
        <span style="margin-left:22px;color: rgba(151, 211, 251, 100);font-w