Uniapp-chat是一款基于uni-app框架开发的高效聊天应用前端界面。它具备跨平台兼容性,支持多种操作系统,为用户提供流畅、便捷的聊天体验。
在使用uniapp-chat升级到uni-app后发现找不到类似的聊天界面模板,在mui中有现成的例子可以参考,因此我模仿编写了一个新的版本。在这个过程中遇到了一些问题并记录下来。由于我是初学者,可能有些问题是可以通过其他方式避免的。
其中一个主要的问题是scroll-view组件的高度设置:在输入内容之后需要确保对话框中的新消息显示在底部。然而,在uni-app中直接操作DOM来实现这一功能似乎不太可行,并且使用`uni.pageScrollTo`方法会导致页面频繁刷新,包括输入框也会被重置,因此这个方案不可行。
所以最后选择采用scroll-view组件作为解决方案。当竖向滚动时需要给scroll-view设置一个固定的高度值。为了适应不同屏幕尺寸的设备,我们需要通过动态计算来确定scroll-view的实际高度:
```html
```
这里的关键在于根据实际需求正确地设定`style.contentViewHeight`属性以保证滚动区域的高度能够适应不同的屏幕尺寸。