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

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

        一,手动加载更多列表

1,效果图:

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图,所以这里放一个静态图吧。

Vue笔记--可视化大屏列表的两种形式(循环滚动、加载更多)_第2张图片

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

 完整代码:




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

拜了个拜!迪迦。。。

你可能感兴趣的:(Vue方法笔记,前端,vue,javascript)