vue 滚动到底部

template
<div class="mix" ref="chatbox">....</div>

data
data() {
return {
userMsg:
}
}

?
?
methods
goBottom(e) {
e.scrollTop = e.scrollHeight
}
mounted(如果需要进入就滚动)
mounted: function() {
this.$nextTick(function() {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}

watch(如果响应)
watch: {
userMsg() {
this.$nextTick(() => {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
}
?
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略 因为出现了 邪恶分割线
?
CSS3 FLEX 布局解决
display: flex;
flex-flow: column-reverse;
align-items: baseline;

0 个评论

要回复文章请先登录注册