<div class="main">
<ul class="message-list" id="scrolldIV">
<li v-for="i in 100" :key=i>{{i}}</li>
</ul>
</div>
//页面挂载的时候执行
mounted() {
this.toScrollBottom();
window.addEventListener("scroll", this.handleScroll, true);
},
methods: {
//滚动条滑到底部
toScrollBottom() {
var div = document.getElementById("scrolldIV");
div.scrollTop = div.scrollHeight;
this.scrollHeight = div.scrollHeight
},
//滚动条滚到顶部 加载下一页的聊天记录
handleScroll() {
var div = document.getElementById("scrolldIV");
if (div.scrollTop == 0) {
this.page = this.page + 1;
this.getChatRecord(this.page);
}
},
},
//注意记得移除监听事件
//页面销毁时执行
destroyed() {
window.removeEventListener("scroll", this.handleScroll, true);
}