1.当输入框聚焦时,聊天框页面往上进行平移,导致页面难看
解决:设置输入框input的这个属性为false
2.设置上面为false时,定位在下面的输入框不进行上移
解决:动态设置定位top值,设置获取焦点和失去焦点的方法
//定位的样式
:style="{'bottom':inputHeight+'px'}"
//输入框的事件
@focus="focus" @blur="blur"
//定义方法
//聚焦
focus(e) {
let height = e.detail.height
this.inputHeight = height
},
//失焦
blur() {
this.inputHeight = 0
}
3.发出的消息自动滚动到最下面
首先在scroll-view设置:scroll-top="scrollTop"
内部结构为
<scroll-view class="scroll" >
<view id="scroll-view-content"></view>
</scroll-view>
scrollToBottom() { this.$nextTick(() => { // 获取内部容器的高度 uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res) => { //获取scroll-view的高度 uni.createSelectorQuery().in(this).select('.scroll').boundingClientRect((ress) => { this.scrollTop = res.height - ress.height }).exec() }).exec() }) },