我和后台配合,用uniapp开发了一个聊天app,进入聊天页后,总是不能直接到最底部,怎么解决?按照这篇博客,解决了 消息实时显示在最底部的情况,可是文章最后有句话:“要是想要进入页面就滚到最底部呢 我们是在socket链接读取文件的时候调用了这个方法”,看不懂,到底什么时候调用这个方法呢?我在onLoad里调用这个方法,没效果啊。奇怪的是,我从别的地方移植过来的代码,原来的代码一进入聊天框,就可以滑动到最底部,可是我移植过来就不行。请高手指教,谢谢
我的代码:
<scroll-view id="scrollview" class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50" :style="{height: style.contentViewHeight + 'px'}">
在onLoad里:
this.scrollToBottom();
// 滚动到底部
this.$nextTick(function() {
console.log('进入页面滚动到底部')
//进入页面滚动到底部
//this.scrollTop = 9999;
this.scrollTop = 9999999;
this.$nextTick(function() {
this.scrollAnimation = true;
});
});
/**
* @author gongliying
* @date 2019-07-26
* @information 跳转页面底部
*/
scrollToBottom: function () {
let that = this;
let query = uni.createSelectorQuery();
query.selectAll('.m-item').boundingClientRect();
query.select('#scrollview').boundingClientRect();
query.exec((res) => {
that.style.mitemHeight = 0;
res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度 // 因为vue的虚拟DOM 每次生成的新消息都是之前的,所以采用异步setTimeout 主要就是添加了这红字 setTimeout(() => { if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度
that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
} }, 100)
})
}
--
FROM 120.242.252.*