简单的实现其实就是按需加载，用户看到哪里加载哪里，代码不重要，主要记录逻辑
第一步
先获取屏幕可视高度
然后获取每块元素的高度
用屏幕可视高度/每个元素高度=可视区域内渲染多少项
把源数据先截取可视区域项目
第二步
浏览器监听滚动条事件
监听滚动条溢出的高度,把滚动条益处高度处以每个元素的高度，然后得到的整数作为起始下标。
结束下标永远是当前屏幕可视区域内的列表数加上当前起始下标
接着定义一个初始值用来记录上一次结束时的下标
然后当起始值下标加上可视区域内条数==上一次的下标时，说明此时已经滚动到第一次视窗看到的最后一项了，
然后把当前结束下标加上屏幕可视区域内条数赋值给记录初始值的变量，
最后把源数据从起始下标和结束下标进行截取展示
<template>
<div id="app">
<ul class="citys">
<li ref="itemRefHg" v-for="(itemChild,indexChild) in dplist" :key="indexChild"> 城市:{{itemChild.name}}</li>
</ul>
<!-- <div style="margin-top:400px"></div> -->
</div>
</template>
<script>
import city from '../src/assets/city'
export default {
name: 'App',
computed:{
},
data(){
return{
list:city.cityList,
wh:'',
ih:'',
sclist:[],
startIdx:0,
endIdx:'',
dplist:[],
lastIdx :4
}
},
components: {
},
created(){
this.wh = window.innerHeight;
this.getList(this.list)
},
mounted(){
var s = this.$refs.itemRefHg[this.startIdx].offsetHeight
this.ih = s
var endIdx = parseInt(this.wh/s)
this.startIdx = endIdx;
this.scrollFn()
},
methods:{
scrollFn(){
var k = parseInt(this.wh/this.ih)
var _this= this;
window.addEventListener('scroll',function(){
var dsctop = document.documentElement.scrollTop;
_this.startIdx = parseInt(dsctop/200);
_this.endIdx = _this.startIdx + k ;
if(_this.startIdx+k==_this.lastIdx){
_this.lastIdx= _this.endIdx+3
var iCont = _this.sclist.slice(_this.startIdx,_this.endIdx)
console.log('start:'+_this.startIdx+'end:'+_this.endIdx)
for(var m= 0 ;m<iCont.length;m++){
console.log(iCont[m].name)
}
_this.dplist = _this.dplist.concat(iCont)
}
},)
},
getList(arr){
var m = []
for(var i=0;i<arr.length;i++){
for(var x=0;x<arr[i].child.length;x++){
m.push(arr[i].child[x])
}
}
this.sclist = m
this.dplist = m.slice(0,4)
}
}
}
</script>
<style>
.provids{
border-bottom: 2px solid #e5e5e5;
margin-bottom: 20px;
}
.citys{
margin: 0;
padding: 0;
}
.citys li{
height: 200px;
line-height: 40px;
background: #e5e5e5;
margin-bottom: 20px;
}
</style>
