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

        一，手动加载更多列表

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-weight: bolder;width:100px;">{{item.toCapitalMoney}}</span>
        <!-- 时间 -->
        <span style="margin-left:40px;">{{item.toCapitalTime}}</span>
    </li>
    <li style="text-align:center;display:block;" v-if="loadingMoreShow"><span class="loadingMoreBtn" @click="loadingmore">加载更多>>></span></li>
</ul>
</div>

script：

data() {
  return {
    listData:[],              // 数据数组
    loadingMoreShow:false,    // 控制“加载更多”是否显示
    pageSize:20,              // 列表显示的数据量
    timer:null                // 定时器
  }
},

// create 列表初始化数据列表，调用服务方法
created() {
  this.toCapitalProjectList(); 
},

//DOM挂载完毕后，在列表上添加定时器，实现10秒列表刷新数据，保证新数据实时显示；
mounted(){
  this.timer = window.setInterval(() => {
    console.log("定时器啊")
      this.toCapitalProjectList(); 
  },10000)
},

methods:{
//从服务中拿取数据
      toCapitalProjectList(){
        let param = {
          pageNo: 1,
          pageSize: this.pageSize
        }
        getAction("statistical/toCapitalProject/list",param).then(res => {
          if(res.success){
            this.listData = res.result
            if(this.listData.length == this.pageSize){
              this.loadingMoreShow = true
            }else{
              this.loadingMoreShow = false
            }
          }else{
            this.listData = []
          }
        })
      },
//加载更多
      loadingmore(){
        this.pageSize += 10;
        this.toCapitalProjectList(); 
        clearInterval(this.timer)
        this.timer = window.setInterval(() => {
          this.toCapitalProjectList(); 
        },10000)
      }

},
//组件内守卫清除定时器
beforeRouteLeave(to, from, next){
  next();
  if(this.timer){
    window.clearInterval(this.timer)
    this.timer = null
  }
}

二，循环滚动列表

循环滚动列表的实现核心是：vue-seamless-scroll  的使用。

1，效果图

很尴尬，我不会截图GIT图，所以这里放一个静态图吧。

2，逻辑

 安装 vue-seamless-scroll 工具，引入后使用该组件。组件包含住循环的数据列表，自动实现滚动效果，按照项目需求调节样式即可；

3，实现代码：

安装：

cnpm install vue-seamless-scroll --save

引入：

import vueSeamlessScroll from "vue-seamless-scroll";

使用：

// 定义组件
components: {
   vueSeamlessScroll,
},

// 设置计算属性
computed: {
  classOption() {
    return {
      step: 0.3, // 数值越大速度滚动越快
      limitMoveNum: this.listLenght, // 开始无缝滚动的数据量 this.dataList.length
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
    };
  },
},

 完整代码：

<template>
<div class="wapper">
          <vueSeamlessScroll :data="listData" class="seamless-warp" :class-option="classOption">
          <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-weight: bolder;width:100px;">{{item.toCapitalMoney}}</span>
                <span style="margin-left:40px;">{{item.toCapitalTime}}</span>
              </li>
            </ul>
          </div>
          </vueSeamlessScroll>
</div>
</template>

<script>
  import vueSeamlessScroll from "vue-seamless-scroll";
  export default {
    name: "Analysis",
    components: {
      vueSeamlessScroll,
    },
    data() {
      return {
        listData:[],
        listLenght:28,
      }
    },
    computed: {
      classOption() {
        return {
          step: 0.3, // 数值越大速度滚动越快
          limitMoveNum: this.listLenght, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        };
      },
    },
    created() {
      this.toCapitalProjectList(); 
    },
    methods: {
      toCapitalProjectList(){
        let param = {
          pageNo: 1,
          pageSize: 999999
        }
        getAction("statistical/toCapitalProject/list",param).then(res => {
          if(res.success){
            this.listData = res.result
          }else{
            this.listData = []
          }
        })
      },
    },
  }
</script>

 这两列表的展示方案，基本上就可以满足开发可视化大屏列表了。具体使用那种方法，那就智者见智了。好了，这篇文章就分享到这里，希望对大家有用。

拜了个拜！迪迦。。。