微信小程序解决导航栏会被撑出屏幕问题。

最近在开发小程序的时候，碰见这么个需求，要求在导航栏的名称根据操作动态变化，之前开发的时候给导航栏开启了自定义属性，自己写了个样式，当键盘被唤醒的时候，导航栏是会被撑出屏幕的，后面修复了一版，不开启自定义属性，用小程序的原生API,wx.setNavigationBarTitle来进行导航栏名称的显示，是可以实现不被键盘撑出屏幕的，但是就在前几天他突然不生效了，无奈又只能重新解决这个问题，在微信开发者社区，看有人咨询相关问题，官方人员给的回复是，不给键盘开启adjust-position属性，这样键盘就不会把屏幕内容撑高，建议使用wx.pageScrollTo让屏幕跳到指定位置。但是要是想开发输入功能的，肯定希望输入框是在键盘上方的，不然体验是非常不友好的。

        为了实现这样的功能，换了种思路，我们可以将输入框的样式写成动态的，这时候监听textarea的onInputChange事件，如果有焦点，将键盘的高度传给输入框的padding-botom，这样导航栏就不会被撑出屏幕，并且实现了输入框会在键盘上方的这个诉求。当键盘失去焦点的时候，则将输入框的高度恢复默认。下面附上代码。

 第一步：将textarea里面的adjust-position属性置为false，因为此属性为true的话，会自动撑高键盘上方的内容，小程序官方给的解释是导航栏也属于屏幕内容，所以会被撑开。

 第二步：监听textera的inputBindFocus事件。监听是否获取焦点，我这里是将在textarea区域外部包了一层组件，来实现的输入框。所以需要向父级传值，如果是在同一组件内，只需要传值就好。

 

 

 第三步：将输入框的受键盘高度影响的样式值设为动态的，在data里面说明新的样式，并将动态的样式绑到组件上。

第四步：动态获取键盘高度并且将值传给新的样式。

第五步：将得到的值绑定给新的样式。

输入框随着键盘的关闭下滑，和上面思路一样，就不把代码放出来啦。

希望能给大家带来帮助。