以下问题均是在安卓真机测试遇到的问题。手机是OPPO的
我现在在使用的过程中遇到了一些问题,总结一下vue和nvue的input框的问题,搞得我焦头烂额
在vue中遇到的问题和BUG
- input组件无法控制聚焦和失焦,出现点击任何元素都会导致input失焦的情况,而input失焦后软键盘也跟着隐藏,这在IM通讯类软件中是个致命伤,信息输入完毕后,点击发送,就会出现input失焦,键盘隐藏,发一次隐藏一次,体验过差。
- input输入框顶起键盘BUG,当input框处于聚焦状态时,如果这时候切换到别的页面,或者直接通过手机主菜单页面返回主屏幕,然后再切回到程序,会发现软键盘依然处于显示状态,而input已经失焦,这就导致文本框在软键盘之下的BUG。
- 经过多次测试发现,在某种情况下(具体哪种情况不明确,官方获奖的IM例子中就有这个问题),input聚焦和失焦也会出现问题2的BUG,键盘盖住input。(如果单设置一个空页面,里面加一个view填充上半部分,下半部分增加一个input,点击多少次都不会出现2的BUG)
- 键盘右下角字样控制有限,官方是说想使用更多就使用nvue
值得一提的是这些问题在nvue下得到了完美的解决,但是nvue就没有问题了吗?当然有
在nuve下input虽然解决了上面的三个问题,但是又多出来了别的问题。
- input组件不能控制是否顶起页面,就是默认顶起,只要input框可能被软键盘遮挡,就必然会被顶起。但是正常理解的话,这么做本身并没有错,就像我进饭店肯定是吃饭的一样。但是问题就出在我想通过onKeyboardHeightChange事件监听键盘高度动态更改scroll-view高度上了,如果键盘高度变化,那么scroll-view高度减去键盘的高度,但是问题就出来了,scroll-view高度是变化了,但是页面还是整体被移上去了,导致中间一片空白,而空白的高度刚好是我减去的高度,我又试着通过margin-top去更改,但是发现这么更改的界面虽然实现了自己想要的功能,input失焦和聚焦事件频繁的时候页面闪烁严重,而且界面不流畅。看起来像是CPU飙到了80%以上的电脑一样。
- input组件不能控制软键盘和光标之间的距离,看weex文档里面的描述,upriseOffset只对IOS生效。这导致键盘紧挨着input底,如果设置了别的按钮图片什么的,甚至还会盖住,看起来非常的不舒服。
就一个小小的input折腾了我两天,本人也是刚接触uniapp没多久,所以技术和表达能力有限,以下算是我的总结。
如果把nvue和vue合并,刚好能解决我的所有问题。虽然说问题现在已经通过歪路子解决了,但是总觉得不完美,有种牛头对在马嘴上一样,就感觉是有种通过各种修改样式和模仿事件把一个button组件变成了text组件一样。虽然看起来没啥区别了,但是总觉得别扭,这对强迫症和处女座非常不友好,官方是不是应该进化一下这个组件呢?
另外我还发现一个问题,在APP端,页面越复杂越推荐使用nvue,相对更流畅,但是实际情况又告诉我,越复杂越用nvue也就头越大,weex总是给人一种半成品的感觉,BUG横生,出乎意料。网上关于weex的资料更是少之又少。
大前端小王子
深有同感
2021-05-28 13:36