微信小程序遇到的bug-当键盘出现时，input上移

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

bug描述

今天在开发微信小程序的时候，遇到一个相当坑的情况。正如下图所示：当键盘被调起时，input输入框的值也会跟着上移。但是仅input框上移，并不是整个页面上移，则出现了这个bug。

寻找解决方案

百度了相当多的解决方案，在微信小程序社区或者百度上存在最多的解决方案就是：

1.adjust-position设置为false

2.加个cursor-spacing属性

3.alwaysEmbed设置为true

4.将input替换为textarea，因为textarea有fixed属性

查看微信官方文档中input标签确实有这几个属性的相关配置。

最终实践

但是很不幸，在自己的新项目中却不生效。于是自己去代码中排查，应该是样式的问题，发现是因为我使用了背景颜色，并将整个页面设置了height:100vh的属性，当我将这一属性去除时，则不会上移。

.bg{
  background: #f5f6fa;
  height: 100vh;
  position: fixed; 
  width: 100%;
  overflow: auto;
}

于是，我又尝试了另外一种解决方案，就是将最外层的view修改为scroll-view，之后重新编译，发现该bug已完美解决。哈哈~

<scroll-view class="bg" scroll-y="true">
……
<input value="{{ consigneeName }}"  class="weui-input" placeholder="请输入收件人姓名" bindinput="bindKeyInput"/>
……
</scroll-view>

总结思考

通过本次bug出现，到寻找解决方案，到最终解决，让我有了比较的大的感触，虽然在平时开发过程中，经常出现某个bug直接百度就能直接找到解决方案，但是实际上，我们还要结合自己的项目，结合实际情况，思考bug出现的原因，再根据实际情况寻求解决方案。才不会因为网上的解决方案无法实现 而浪费很长时间。