<div class="box" v-loadmore="loadMore">
<el-scrollbar wrap-style="max-height: 400px;" view-class="view-box" :native="false" wrapClass :noresize="false" viewStyle id="scroll" ref="myScrollbar">
<ul>
<li></li>
</ul>
</el-scrollbar>
</div>
directives: {
loadmore: {
//自定义指令: 下拉加载
bind(el, binding) {
var p = 0;
var t = 0;
var down = true;
var selectWrap = el.querySelector(".el-scrollbar__wrap");
selectWrap.addEventListener("scroll", function() {
//判断是否向下滚动
p = this.scrollTop;
if (t < p) {
down = true;
} else {
down = false;
}
t = p;
//判断是否到底
const sign = 10;
const scrollDistance =
this.scrollHeight - this.scrollTop - this.clientHeight;
// console.log(this.scrollTop)
if (scrollDistance <= sign && down) {
binding.value();
}
});
}
}
},
methods:{
loadMore() {
this.currentPage++;//请求次数
this.querylogid(this.currentPage, true);//调用请求的数据的接口
}
querylog(num, flag) {
const params = {
page_count: num,
page_items: 10,
};
this.$axios.querylog(params).then(res => {
if (res .num == 0) {
//如果是请求的就拼接数据
if (flag) {
this.recordData = this.recordData.concat(res .data);
} else {
this.recordData = res .data;
}
}
});
},
}