界面ui:
需求，输入姓名时，需要做一个模糊匹配的界面。比如用户输入姓名：白。本地有一个保存的历史记录，用来保存玩家的信息。例如：‘白1，白2，白3，白4’。。。这个时候会将相似的名字罗列出来，显示在下拉列表下上。类似百度搜索下拉列表。ui上正确的显示方式。下拉列表，应该显示在最上层。
但是遇到一个bug，最下方的textarea中默认文本“请粘贴联系人信息...”显示在下拉列表上。这个显示上的bug，在微信文档上得到了解释。
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
大概的意思就是，textarea属于原生组件。显示在所有视图层之上，即使你改变其他view的z-index也无济于事。
于是想到一个解决方案：当下拉列表显示时，关闭textarea的显示。这里使用的是hidden。上面的第一个bug得以解决。
但是由这个hidden导致了下面的bug。
用户输入姓名时，出现下拉模糊匹配列表时，这个时候虚拟键盘关闭。但是焦点还在姓名输入框内。导致如果不主动切换到其它输入框获取焦点。就无法调起虚拟键盘。正确的显示逻辑是：
方案1：弹出下拉模糊匹配列表时。虚拟键盘不消失，焦点仍处于姓名输入框内。
这种显示逻辑是可以接受，但是现在的情况是，虚拟键盘关闭，焦点还在。很尴尬。。。
最后发现：是因为显示下拉列表时，使用hidden关闭textarea文本框导致输入焦点异常。尝试wx:if也是不行的。wx：if条件渲染和hidden基本上是类似的。最后是使用display的方式。完美解决该问题，显示成第二种方案。
总结：这两个问题都是原生组件导致的，一方面对它不甚了解，第二方面其本身就是兼容上有部分问题。对原生组件的使用要严格按照官方文档。不然有可能出现意想不到的问题。
网友评论