uniapp开发抖音小程序监听键盘弹起keyboardheightchange,并获取键盘高度(全网第一唯一成功案例,你问ai都没用)

废话不多说,今天也是整上了uniapp开发小程序适配抖音端,由于项目需要做出点击输入框,键盘顶起输入框的效果,所以需要监听到键盘弹起,然后获取键盘的高度,作为属性设置到输入框的css样式当中,方可达到需求效果。

然而,抖音小程序并不支持onKeyBoardHeightChange事件,如果你妄图使用这个api,很遗憾并且很明确的告诉你,根本没有什么吊用。

最开始,我是打算问ai直接拿到解决方案,但是ai并非万能的,它就连抖音小程序文档中的input相关事件有个bindkeyboardheightchange都不懂,只会叫你去调uniapp的onKeyBoardHeightChange。

在之后,我去浏览了抖音小程序的相关文档,发现input的event中有一个bindkeyboardheightchange,最开始,我以为看到了曙光,直接去使用,然而,很遗憾又踩了一次坑,直接使用它根本不会触发。

在这个时候,我已经打算放弃了,又去了github和uniapp的插件商城寻是否有第三方库或者插件,能够直接获取到键盘高度,然而找了一圈并没有找到。

之后,我抱着试一试的心态,想着试一试this.$nextTick,没想到,成了!

代码如下:

template中:

重点在keyboardheightchange,其他的代码不用管

html 复制代码
	<input :adjust-position="false" v-model="msg" class="dh-input" type="text" @confirm="confirmMessage"
					@keyboardheightchange="handleKeyboardChange" placeholder-style="color:#999999;" confirm-type="send"
					placeholder="输入你想说的话~" />

script中:

javascript 复制代码
	handleKeyboardChange(e) {
				this.$nextTick(() => {
					// console.log("弹起了!", e); 
					this.changeKeyBordHeight(e.detail.height) //键盘的高度就是e.detail.height
				})

			}

如果我的这篇文章能够帮助当前正在困惑的你,请不要忘记帮我点个小赞赞哦!

相关推荐
竣子好逑40 分钟前
uniapp 微信小程序 数据空白展示组件
微信小程序·小程序·uni-app
V+zmm101343 小时前
基于微信小程序的在线选课系统springboot+论文源码调试讲解
java·小程序·毕业设计·mvc·springboot
AdSet聚合广告3 小时前
穿山甲等广告联盟依据哪些维度给APP、小程序结算广告变现收益
大数据·小程序
shimmer0086 小时前
抖音小程序登录(前端通过tt.login获取code换取openId)
前端·小程序·状态模式
潜意识起点9 小时前
微信小程序 app.json 配置文件解析与应用
微信小程序·小程序·json
计算机徐师兄16 小时前
Java基于SSM框架的无中介租房系统小程序【附源码、文档】
java·微信小程序·小程序·无中介租房系统小程序·java无中介租房系统小程序·无中介租房微信小程序
源码哥_博纳软云16 小时前
JAVA智慧养老养老护理帮忙代办陪诊陪护小程序APP源码
java·开发语言·微信小程序·小程序·微信公众平台
说私域17 小时前
私域电商逆袭密码:AI 智能名片小程序与商城系统如何梦幻联动
人工智能·小程序
孙 悟 空1 天前
uni-app:监听页面返回,禁用返回操作
前端·javascript·uni-app
说私域1 天前
无人零售及开源 AI 智能名片 S2B2C 商城小程序的深度剖析
人工智能·小程序·零售