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-viewstyle="height: 81vh;"class="chat-messages"scroll-yid="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這個方法
