1***@qq.com
1***@qq.com
  • 发布:2022-04-20 09:39
  • 更新:2023-12-08 14:11
  • 阅读:888

大神们,想实现组件跟随键盘效果

分类:uni-app

本小弟想开发一款APP,需要实现像抖音这样的评论框组件 跟随键盘弹出和收起,最主要是无缝的,

我现在是将输入框区域设置成position: fixed; bottom: 0; 然后尝试了两种方式 ,第一种是uni.onKeyboardHeightChange 监听键盘高度,来改变输入框区域bottom值,但是输入框会先到达,键盘才升起,键盘升起有动画效果! 我本来是想找一下键盘升起的动画效果 用transition做到效果同步,后来想想不现实,毕竟每款手机可能键盘升起的效果都不一样!

第二种方式 不使用键盘监听,设置pages "softinputMode": "adjustResize" 键盘升起会自动改变窗体尺寸,但是这个延迟太严重。。 键盘升起后估计500ms才触发窗体改变事件

我看很多APP的输入框区域是和键盘升降是完全无缝衔接,期望各位大佬能提供一下自己实现的方案,也希望官方大神们能提供些思路!

2022-04-20 09:39 负责人:无 分享
已邀请:
像素方舟_青阳

像素方舟_青阳

  1. 输入框设置成单独页面,pages.json 里面配置 app-plus.background = "transparent" 背景透明
  2. 输入页面 uni.onKeyboardHeightChange 设置这个,组件上提供的高度变化事件比 uni.onKeyboardHeightChange 慢很多
  3. 输入框设置adjust-position 允许上推页面
  • 1***@qq.com (作者)

    感谢您的回复,我看到过你回复的其他帖子 https://ask.dcloud.net.cn/question/128642,其实我更需要做的是富文本编辑器的操作区,暂时能解决操作区域能根据键盘高度变化而变化位置,只是整体效果不好,我更想做出像抖音或者微信等等APP,感觉那一块操作区是完全跟随键盘的,试过很多自己想到的方式,效果都不好。

    2022-04-20 10:39

定制及二开

定制及二开 - 接应用二开及定制QQ:903646557

键盘弹出事件,然后取键盘高度,最后就是组件定位就好了

  • 1***@qq.com (作者)

    感谢您的回复,我现在就是这么做的。就是我上面说的第一种方式,只是觉得不完美,键盘弹出事件定位组件 组件会先到定位的地方! 然后键盘才会慢慢到位! 因为键盘有动画,我主要是想让组件和键盘无缝弹出和收回,我还没找到合适的方法!

    2022-04-20 12:00

LoLoo

LoLoo

请问找到解决办法了么,我也是试了几次才发现实现不了,可能只有nvue能解决

  • 1***@qq.com (作者)

    好久没来了,没有找到能解决的方法~ 我就是用的nvue

    2022-08-27 17:34

5***@qq.com

5***@qq.com

问一下这个方法最后怎么解决的,我也遇到了这个问题一直解决不了

呆狗的一生

呆狗的一生 - 呆狗的一生

不知道怎么实现。

旧崖

旧崖

有找到实现无缝弹出和收回的方法吗

3***@qq.com

3***@qq.com

你可以做一个弹出动画放在 你的文本框放在组件里 这样可以试一下

4***@qq.com

4***@qq.com

实现了吗

要回复问题请先登录注册