template<div class="mix" ref="chatbox">....</div>
datadata() {
return {
userMsg:
}
}
?
?
methodsgoBottom(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; 查看全部

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

data() {

	return {

		userMsg: 

	}

}

goBottom(e) {

	e.scrollTop = e.scrollHeight

}

mounted: function() {

	this.$nextTick(function() {

		let e = this.$refs.chatbox;

		this.goBottom(e);

	})

}

watch: {

	userMsg() {

		this.$nextTick(() => {

			let e = this.$refs.chatbox;

			this.goBottom(e);

		})

	}

}

display: flex;

flex-flow: column-reverse;

align-items: baseline;