这个是element ui中滚动条组件scrollbar文档上面没有,然后自己写的一个方法。(适用于大部分)
最新的element plus中scrollbar文档已经给出,代码应该会更完善。element plus的方法后续我用到会更新。
滚动条触底增加页码并且拼接到原有数据
html
js
关键代码(计算触底方法). !!这个代码贴到文章底部!!
最好给加载的数据加一个loading,防止触底多次触发
增加page
接口调用
更新滚动条
关键代码贴出来方便复制
this.$refs.scrollbar.handleScroll=()=>{
var wrap = this.$refs.scrollbar.wrap;
this.$refs.scrollbar.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
this.$refs.scrollbar.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
let poor = wrap.scrollHeight - wrap.clientHeight
if( poor == parseInt(wrap.scrollTop) || poor == Math.ceil(wrap.scrollTop) || poor == Math.floor(wrap.scrollTop) ){
// console.log('触底')
this.isLoding?'':this.addPage()
}
}