做移动端项目，如何在键盘弹起时候，把聊天的消息顶到键盘的上方

最新推荐文章于 2024-07-21 22:49:59 发布

乐容

最新推荐文章于 2024-07-21 22:49:59 发布

阅读量156

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/m0_61265297/article/details/131215856

版权

给搜索框绑定获取焦点的事件
<u-input ref="input" v-model="value" type="text" :clearable='false' :height='80' @focus="handleFocus" />

			// 获取焦点，先判断是不是pc端，不是pc端才进行
// 关键代码
盒子的高度减去屏幕的高度，加上顶部导航栏的高度加上键盘的高度加上输入框的高度
			handleFocus() {
				var system = {};
				system.pingtai = /(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel|MacPPC|Linux mips64)/i.test(navigator.platform);
				if (system.pingtai) {
					//电脑
					return
				} else {

					// 获取聊天盒子的高度
					this.divHeight = document.getElementById('scrollview').getBoundingClientRect().height
					// 获取屏幕的高度
					this.originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
					// 获取导航栏的高度
					this.healder = document.getElementById('healder').getBoundingClientRect().height
					// 获取输入框的高度
					this.submitHeight = document.getElementById('dialogueSubmit').getBoundingClientRect().height


					const that = this
					window.onresize = function() {
						// 获取可视区域的高度
						that.resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
						that.he = that.originalHeight + that.submitHeight - that.resizeHeight
						// 获取键盘
						that.keyboard = that.originalHeight - that.resizeHeight
						// alert(that.divHeight)
						if (that.divHeight >= that.resizeHeight - that.submitHeight - that.healder) {
							// alert("走没走")
							// alert(that.resizeHeight)
							const a = that.resizeHeight - that.healder - that.submitHeight
							that.yi = that.divHeight - a
							// alert(that.yi)

						}
						if (that.keyboard) {
							that.$nextTick(function() {
								setTimeout(() => {
									uni.pageScrollTo({
										scrollTop: that.divHeight - that.originalHeight + that.keyboard + that.submitHeight +
											this.healder,
										duration: 0
									})
								}, 0)
							})
						}



					}




				}

				// alert(this.divHeight)
			},