效果展示 滚动到底部加载

项目结构

js_7">data.js

export default
  [{
    "recGroph": [
      {
        "key": ["设备指纹模型", "未知"],
        "value": 1200
      },
      {
        "key": ["设备指纹模型", "青铜"],
        "value": 1053
      },
      {
        "key": ["设备指纹模型", "黄金"],
        "value": 1077
      },
      {
        "key": ["设备指纹模型", "白银"],
        "value": 1126
      },
      {
        "key": ["设备指纹模型", "战神"],
        "value": 10
      },

      {
        "key": ["cookie数据", "未知"],
        "value": 21
      },
      {
        "key": ["cookie数据", "青铜"],
        "value": 22
      },
      {
        "key": ["cookie数据", "黄金"],
        "value": 24
      },
      {
        "key": ["cookie数据", "白银"],
        "value": 23
      },
      {
        "key": ["cookie数据", "战神"],
        "value": 11
      }
      ,
      {
        "key": ["IOS渠道", "未知"],
        "value": 31
      },
      {
        "key": ["IOS渠道", "青铜"],
        "value": 32
      },
      {
        "key": ["IOS渠道", "黄金"],
        "value": 34
      },
      {
        "key": ["IOS渠道", "白银"],
        "value": 33
      },
      {
        "key": ["IOS渠道", "战神"],
        "value": 1126
      },
      {
        "key": ["IOS11渠道", "未知"],
        "value": 31
      },
      {
        "key": ["IOS11渠道", "青铜"],
        "value": 32
      },
      {
        "key": ["IOS11渠道", "黄金"],
        "value": 34
      },
      {
        "key": ["IOS11渠道", "白银"],
        "value": 33
      },
      {
        "key": ["IOS11渠道", "战神"],
        "value": 1126
      }
     


    ]

  }
  ]

vue____vif__for____104">scroll.vue

<template>
  <div>
     <div class="table__div" id="resultScroll"  @scroll="handleScroll"   ref="myScrollbar">
        <div class="div" v-for="item in scroll_add" :key="item" >
              <table  >
            <tbody >
                 <tr  v-for="(item,index) in arr_list " :key='index'>
                 <td >{{item[0].key[1]}}</td>
                 <td  v-if="td_show"  v-for="(item1,index1) in item " :key='index1' >
                  <el-button  > {{Math.round((item1.value / total) * 10000) / 100.0 + "%"}}</el-button>
                </td>
                 <td  v-if="!td_show"  v-for="(item1,index1) in item " :key='index1' >
                  <el-tooltip   effect="dark" :content=' Math.round((`${item1.value}` / total) * 10000) / 100.0 + "%" ' placement="top-start" >
                  <el-button  > </el-button>
                  </el-tooltip>
                </td>
                 </tr>
            </tbody>
            <tfoot>
                  <tr> 
                      <td></td>
                      <td v-for="(item,index) in types " :key='index'>{{item}}</td>
                  </tr>
            </tfoot>
        </table>
        </div>
    </div>

        <!-- <table  >
            <tbody >
                 <tr  v-for="(item,index) in arr_list " :key='index'>
                 <td >{{item[0].key[1]}}</td>
                 <td  v-if="td_show"  v-for="(item1,index1) in item " :key='index1' >
                  <el-button  > {{Math.round((item1.value / total) * 10000) / 100.0 + "%"}}</el-button>
                </td>
                 <td  v-if="!td_show"  v-for="(item1,index1) in item " :key='index1' >
                  <el-tooltip   effect="dark" :content=' Math.round((`${item1.value}` / total) * 10000) / 100.0 + "%" ' placement="top-start" >
                  <el-button  > </el-button>
                  </el-tooltip>
                </td>
                 </tr>
            </tbody>
            <tfoot>
                  <tr> 
                      <td></td>
                      <td   v-for="(item,index) in types " :key='index'>{{item}}</td>
                  </tr>
            </tfoot>
        </table> -->
  </div>
</template>

<script>
import data1 from "./data.js";

export default {
  data() {
    return {
      arr_list: [], //等级属性数组
      types: [], //类型
      data_ios: [],
      td_show: true, //数据过多  隐藏数据
      data1: data1[0].recGroph,
      total: 10000,
      arr100: [],


      //滚动
      data_scroll: [1,1,1,1,1,1,1,1,1, 
                    1,1,1,1,1,1,1,1,1,
                    1,1,1,1,1,1,1,1,1,
                    1
                  ],
      scroll_add:[], //第一次渲染
      count: 0,//页数
      data_total:0, //总页数
      page_size:6,  //
      surplus:''

     
    };
  },

  created() {
    console.log(data1);
    //获取数据类型key的种类
    for (let i = 0; i < this.data1.length; i++) {
      this.types[i] = this.data1[i].key[0];
    }
    this.types = [...new Set(this.types)];
    for (let i = 0; i < this.types.length; i++) {
      this.data_ios = this.data1
        .filter(item => item.key[0] === this.types[i])
        .reverse();
    }
    for (let i = 0; i < this.data_ios.length; i++) {
      var arr = this.data1.filter(
        item => item.key[1] === this.data_ios[i].key[1]
      );
      this.arr_list.push(arr);
    }


 /////数据过多  隐藏数据 触摸提示
    if (this.types.length > 10 || this.arr_list.length > 10) {
      this.td_show = false;
    }


this.data_total=Math.ceil(this.data_scroll.length/this.page_size)
this.surplus=this.data_scroll.length%this.page_size


//进入页面第一次渲染---------------------
   for (let i = 0; i <this.page_size; i++) {
     this.scroll_add.push(this.data_scroll[i])
   }
  },

  methods: {

    handleScroll(){
                var that = this
                var sh = that.$refs['myScrollbar'].scrollHeight // 滚动条高度
                var st = that.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离
                var ch = that.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度
                if (st + ch >= sh) {
                    //滚动到底了-业务逻辑
                   this.count++
                   if( this.count<this.data_total){
                     for (let i = this.count*this.page_size; i <this.count*this.page_size+this.page_size ; i++) {
                       this.scroll_add.push(this.data_scroll[i])
                     }
                   } 
                   if( this.count==this.data_total){  //添加最后一页剩余
                      for (let i = this.count*this.page_size; i <this.count*this.page_size+this.surplus ; i++) {
                       this.scroll_add.push(this.data_scroll[i])
                     }                                                     
                   }
                }
            },
  }
};
</script>

<style>
.table__div {
  height:500px;
  overflow-y: scroll;
}
.div {
  width: 33%;
  height: 300px;
  /* background-color: rgb(185, 50, 50); */
  float: left;
}

table {
  border-collapse: collapse;
  width: 33%;
  float: left;
}
tr {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #fff;
}

.el-button,
tr {
  height: 30px;
}
.el-button,
td {
  width: 100%;
}

tbody td {
  white-space: nowrap;
  background-color: rgb(140, 178, 228);
  text-align: center;

  padding: 0;
  margin: 0;
  border-right: 1px solid #fff;
}

tbody tr td:first-child {
  background-color: transparent;
  text-align: right;
  color: #979797;
}

tbody tr:last-child td:not(:first-child) {
  background-color: #c1dbf9;
}

.el-button {
  display: inline-block;
  border: none;

  background-color: #2689ff;
  padding: 0;
  border-radius: 0;
  color: #fff;
}

tbody tr:last-child td:not(:first-child) .el-button {
  background-color: transparent;
  color: #fff;
}

.el-button:hover {
  background: rgb(82, 155, 243);
  color: #fff;
}
.el-button:focus {
  background: rgb(149, 195, 250);
  color: #fff;
}

tfoot td {
  width: 100%;
  color: #979797;
  white-space: nowrap;
}
</style>