1.vue右侧滚动条自动到底部
<div ref="newMessage1"></div> <!-- 定义<div ref="newMessage1"></div>与<div v-for=”item in list“>循环同级定义-->
定义方法
scrollToBottomCenter(){
this.$nextTick(() => {
this.$refs.newMessage1.scrollIntoView({ behavior: 'smooth' });
});
},
在push到list数组内高度变化是调用scrollToBottomCenter这个方法
2.uniapp右侧滚动条自动到底部
<view class="" >
<scroll-view
style="height: 81vh;"
class="chat-messages"
scroll-y
id="chatMessages"
enable-flex
@scrolltolower="scrollToBottom"
:scroll-top="scrollTop"
scroll-with-animation="true"
>
<view class="all" v-for="item in allList">
..............
</view>
</scroll-view>
在data中定义
data() {
return {
scrollTop: 0,
}
},
定义方法
scrollToBottom() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select('#chatMessages').fields({
id: true,
dataset: true,
rect: true, // 获取布局信息
size: true, // 获取宽高
scrollOffset: true, // 获取滚动信息
scrollHeight: true,
}, (res) => {
// console.log('完整节点信息:', res)
if (res && res.scrollHeight) {
this.scrollTop = res.scrollHeight
// console.log('设置成功 scrollTop:', this.scrollTop)
} else {
console.warn('未获取到有效滚动信息', res)
}
}).exec()
})
},
在push到alllist高度变化时调用scrollToBottom这个方法
