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

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

        一，手动加载更多列表

1，效果图：

2，逻辑

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

3，实现代码

HTML：

    

        
        {{item.projectName}}
        
        {{item.toCapitalMoney}}
        
        {{item.toCapitalTime}}
    
    
加载更多>>>

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)
    };
  },
},

 完整代码：

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

拜了个拜！迪迦。。。