vue——利用@scroll实现滚动加载更多

<template>
　　<div>
　　　　 <div> //顶部固定区域
　　　　　　　···
　　　　</div>
　　<div :style="obj" @scroll="listenScroll"> //滚动区域 　　 ··· 　　<div>
　　</div> </template> <script> export default { name: \'Home\', data() { return {
　　　　　　winHei: screen.availHeight, //屏幕高度 obj:{
　　　　　　　　height: 0
　　　　　　},
　　　　　　pagenum：1, pagesize: 10, 　　　　　　dataLIst:[] } }, 　　mounted(){

　　　　　let topH = document.getElementById(\'d-top\').offsetHeight; //获取顶部区域高度
　　　　　this.obj.height = (this.winHei - topH) + \'px\'; //动态修改滚动区域高度

　　　　this.getList();　　 　　}, methods: { getList(){ let param = { param: { pageNumber: _this.pagenum, pageSize: _this.pagesize } }; ··· //获取数据，后台分页处理 　　　　　　　 　　　　　　　for (let i in list) { //list为获取的数据列表 　　　　　　　　_this.dataList.push(list[i]); //追加在已有数据后 　　　　　　　} }, listenScroll(e) { //监听滚动 let ele = e.srcElement ? e.srcElement : e.target; if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { //监听滚动到div底部 this.addMoreData(); } }, addMoreData() { //加载更多 ··· //加载效果 ++_this.pagenum; _this.getList(); }, } } </script>