关于小程序聊天框开发遇到的问题

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()
				})
			},

4.键盘弹起时scroll-view高度不变，导致滚动不到最下面

解决：动态设置scroll-view的高度，根据获取焦点失去焦点，使用容器的高度减去键盘的高度，在获取焦点的时候能获取到键盘的高度