参考原文: https://www.cnblogs.com/gongliying/p/11258189.html
在开发过程中,也需要对一些细节的高度进行调整,聊天界面需要了解一下API:
https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
- 当前可使用窗口高度: windowHeight
- 底部输入框的高度,根据实际需求,有的是只有输入框,有的是和微信一样,有一些辅助功能,点击加号
- 实时获取底部的高度
let query = uni.createSelectorQuery();
query.select('.button__box').boundingClientRect()`
- 获取所有消息的节点高度
- 需要在每次发送消息的时候进行调用
在开发过程中也遇到一个坑,就是页面滚动的高度是不变的,这也在uin-app官网中给出了解决方法:
监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
}
}
}
~最终实现了安卓和ios实时消息更新之后都回到底部