mui写聊天界⾯_基于uni-app的聊天窗⼝实现
在mui中有chat界⾯的例⼦，升级到uni-app后，没有类似的模板，因此模仿写了⼀个。遇到了⼀些坑，在此⼀⼀记录下来。当然，由于是新⼿，可能有些坑可以避开。
scroll-view⾼度的设置
输⼊内容后，必然要在对话界⾯的底部显⽰内容，但是在uni-app下不知道如何能操作DOM来显⽰和定位，有说需要通过
uni.pageScrollTo的⽅式，但是这个页⾯刷新的太厉害，输⼊框都刷新了，没法使⽤。所以只能使⽤scroll-view组件。但是通过scroll-view使⽤竖向滚动时，需要给 ⼀个固定⾼度。为了适配屏幕的⼤⼩，则需要通过计算来确定scroll-view的⾼度。
created: function () {
const res = SystemInfoSync();
this.style.pageHeight = res.windowHeight;
tViewHeight = res.windowHeight - SystemInfoSync().screenWidth / 750 * (100); //像素
}
由于给出的是像素⾼度，所以需要换算⼀下 res.windowHeight - SystemInfoSync().screenWidth / 750 * (100); 其中100是底部输⼊框的像素⾼度
scroll-top的使⽤
每次发送内容后，需要滚动到底部，可以通过把最后⼀个元素id赋值给scroll-into-view的⽅式来实现，但是效果也不是很理想，所以采⽤了scroll-top的⽅式。
var that = this;
var query = ateSelectorQuery();
query.selectAll('.m-item').boundingClientRect();
mui框架常用方法query.select('#scrollview').boundingClientRect();
<(function (res) {
that.style.mitemHeight = 0;
res[0].forEach(function (rect) {
that.style.mitemHeight = that.style.mitemHeight + rect.height + 20;});
if (that.style.mitemHeight > tViewHeight) {
that.scrollTop = that.style.mitemHeight - tViewHeight;
}
});
⽅法就是先获取所有内部⼦元素的⾼度，然后⽤⼦元素的⾼度和-显⽰⾼度，就得到了scroll-top的滚动位置。
其他
uni-app的img组件地址有点问题，⼩程序版本能⽤绝对地址，但是app版本就需要使⽤相对路径。
虽然现在每次发送信息后，能滚动到底部，但是输⼊的时候，由于弹出键盘，就可能覆盖了，没法看到最后⼀条信息。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。