HTML代码:
<scroll-view scroll-y="true" class="msg-list" :scroll-top="scrollTop">
<view class="item-box">
<view class="msg-item" v-for="(item,index) in messageList" :key="index">
</view>
</view>
</scroll-view>
data:
scrollTop: 0,
old: {
scrollTop: 0
}
methods:
goBot() {
let itemsHeight = 0;//所有的item加起来的高度
let scrollHeight = 0;//scroll-view的高度
let itemsElement = uni.createSelectorQuery().select('.item-box');
itemsElement.boundingClientRect(data => {
itemsHeight = data.height
}).exec();
let scrollElement = uni.createSelectorQuery().select('.msg-list');
scrollElement.boundingClientRect(data => {
scrollHeight = data.height
}).exec();
if (itemsHeight > scrollHeight) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 9999
});
}
},
判断所有item项的高度是否大于scroll-view的高度,如果超过了就一直到最底部。
其中,通过uni.createSelectorQuery()获取的元素信息是元素在渲染之前的信息,我这边是通过短时间的定时器,在元素渲染之后再获取元素信息。