719728036@qq.com
719728036@qq.com
  • 发布:2020-02-10 02:29
  • 更新:2020-06-20 20:47
  • 阅读:802

关于uniapp和weex中input的问题。

分类:uni-app

以下问题均是在安卓真机测试遇到的问题。手机是OPPO的
我现在在使用的过程中遇到了一些问题,总结一下vue和nvue的input框的问题,搞得我焦头烂额
在vue中遇到的问题和BUG

  1. input组件无法控制聚焦和失焦,出现点击任何元素都会导致input失焦的情况,而input失焦后软键盘也跟着隐藏,这在IM通讯类软件中是个致命伤,信息输入完毕后,点击发送,就会出现input失焦,键盘隐藏,发一次隐藏一次,体验过差。
  2. input输入框顶起键盘BUG,当input框处于聚焦状态时,如果这时候切换到别的页面,或者直接通过手机主菜单页面返回主屏幕,然后再切回到程序,会发现软键盘依然处于显示状态,而input已经失焦,这就导致文本框在软键盘之下的BUG。
  3. 经过多次测试发现,在某种情况下(具体哪种情况不明确,官方获奖的IM例子中就有这个问题),input聚焦和失焦也会出现问题2的BUG,键盘盖住input。(如果单设置一个空页面,里面加一个view填充上半部分,下半部分增加一个input,点击多少次都不会出现2的BUG)
  4. 键盘右下角字样控制有限,官方是说想使用更多就使用nvue

值得一提的是这些问题在nvue下得到了完美的解决,但是nvue就没有问题了吗?当然有
在nuve下input虽然解决了上面的三个问题,但是又多出来了别的问题。

  1. input组件不能控制是否顶起页面,就是默认顶起,只要input框可能被软键盘遮挡,就必然会被顶起。但是正常理解的话,这么做本身并没有错,就像我进饭店肯定是吃饭的一样。但是问题就出在我想通过onKeyboardHeightChange事件监听键盘高度动态更改scroll-view高度上了,如果键盘高度变化,那么scroll-view高度减去键盘的高度,但是问题就出来了,scroll-view高度是变化了,但是页面还是整体被移上去了,导致中间一片空白,而空白的高度刚好是我减去的高度,我又试着通过margin-top去更改,但是发现这么更改的界面虽然实现了自己想要的功能,input失焦和聚焦事件频繁的时候页面闪烁严重,而且界面不流畅。看起来像是CPU飙到了80%以上的电脑一样。
  2. input组件不能控制软键盘和光标之间的距离,看weex文档里面的描述,upriseOffset只对IOS生效。这导致键盘紧挨着input底,如果设置了别的按钮图片什么的,甚至还会盖住,看起来非常的不舒服。

就一个小小的input折腾了我两天,本人也是刚接触uniapp没多久,所以技术和表达能力有限,以下算是我的总结。

如果把nvue和vue合并,刚好能解决我的所有问题。虽然说问题现在已经通过歪路子解决了,但是总觉得不完美,有种牛头对在马嘴上一样,就感觉是有种通过各种修改样式和模仿事件把一个button组件变成了text组件一样。虽然看起来没啥区别了,但是总觉得别扭,这对强迫症和处女座非常不友好,官方是不是应该进化一下这个组件呢?

另外我还发现一个问题,在APP端,页面越复杂越推荐使用nvue,相对更流畅,但是实际情况又告诉我,越复杂越用nvue也就头越大,weex总是给人一种半成品的感觉,BUG横生,出乎意料。网上关于weex的资料更是少之又少。

2020-02-10 02:29 负责人:无 分享
已邀请:
248196244@qq.com

248196244@qq.com

同感,越做越觉得坑多

问问情

问问情 - 人生工具,辨人识人, 情有多深

input 软键盘问题太多,不知为什么官方不解决?

没得好名字

没得好名字 - 90后前端妹子一枚

总结太到位了,

DCloud_heavensoft

DCloud_heavensoft

首先并不是页面越复杂,越应该使用nvue。
应该nvue有优势的场景在文档里有描述:https://uniapp.dcloud.io/use-weex?id=%e9%80%82%e7%94%a8%e5%9c%ba%e6%99%af

如果链接看不到,就强刷缓存。

使用nvue,应该使用uni-app编译模式,无需再看weex的文档。

插件市场有不少基于nvue实现的聊天插件,可以参考。

DCloud_UNI_GSQ

DCloud_UNI_GSQ

如需禁止点击其他位置收起键盘的默认行为,可以监听touch事件并使用prevent修饰符(仅支持App-v3、H5,其他平台可以通过设置focus来使输入框重新获取焦点),例如在确认按钮上使用:@touchend.prevent="onTap"

DCloud_UNI_GSQ

DCloud_UNI_GSQ

关于 vue 页面 2 中提到的问题复现的频率如何,有没有可以稳定复现的栗子和步骤

111s阿斯顿

111s阿斯顿 - 111

提一个建议 input中的类型 number和password类型两个切换的时候出现页面闪烁的问题 为什么password掉用的安卓原生的键盘其他的类型都是第三方的键盘 效果极差 尽快修复吧 太难受了 怎么弄都不行还要因为这个小问题找插件或者自己写一个键盘 真的没必要 轻快开发根本达不到

664327576@qq.com

664327576@qq.com

输入框调起,软键盘,一直是个问题,开始以为是页面定位问题,但实际上是页面被平移上去了,你再怎么在页面里折腾定位,什么调起软键盘时上移输入框,呵呵,你看到的将会是页面平移上去之后,输入框也上去,留白了。折腾定位什么的,然并卵。

  • 2064710903@qq.com

    软键盘使整个nvue页面平移上去了,请问你解决了吗?

    2020-05-25 14:53

云追月

云追月

心累

破晓君

破晓君

安卓软键盘 使nvue页面平移上去 导致页面没办法滚动 页面当中 表单一堆 用户操作的 非常难受

要回复问题请先登录注册