element-plus的隐藏组件el-scrollbar实现触底加载代码：
html：
<el-scrollbar ref="scrollbar">
<ul class="msg-list">
<li v-for="item in msgList" v-bind:key="item.id">
<a :href="item.link" target="_blank">
<div class="msg-list__icon">
<el-badge is-dot type="danger">
<el-avatar :size="40" :src="item.avatar"></el-avatar>
</el-badge>
</div>
<div class="msg-list__main">
<h2>{{item.title}}</h2>
<p>{{item.describe}}</p>
</div>
<div class="msg-list__time">
<p>{{item.time}}</p>
</div>
</a>
</li>
<el-empty v-if="msgList.length==0" description="暂无新消息" :image-size="100"></el-empty>
</ul>
</el-scrollbar>js：
mounted() {
const wrap = this.$refs['scrollbar'].wrapRef
wrap.removeEventListener('scroll', ()=>{this.scrollBarEv(wrap)})
wrap.addEventListener('scroll', ()=>{this.scrollBarEv(wrap)})
},
methods() {
scrollBarEv(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("已经触底了");
}
},
}