让页面不走形：解决自定义导航与输入框失焦的拉扯纠葛

当我们看到一个具有调整位置功能的输入框（adjust-position=true）位于页面底部时，几乎都会遇到这样的一个问题：点击输入框使之获得焦点后，自定义导航栏便自动被系统隐藏了，导致整个页面的布局变得混乱，用户体验极差。若想解决此问题，可通过如下三步骤来实现。

1. 巧妙运用函数
   在.js中我们引入函数wx.createSelectorQuery 以获取节点信息。

    querySelect: function () {
      var _this = this;
      wx.createSelectorQuery().select('.nav').boundingClientRect(function (rect) {
        _this.setData({
          navTop: rect.top
        })
      }).exec()
    }

在onReady()生命周期函数中执行方法querySelect ，以此获取自定义导航在页面中的位置，并将数据存储在变量navTop 中。

    onReady: function () {
      this.querySelect()
    }

2. 实现自定义导航与输入框的联动
   当我们成功获取到自定义导航在页面中的位置后，便可以实现自定义导航与输入框的联动。为此，我们需要在输入框聚焦时监听输入框的高度，并根据输入框的高度计算自定义导航需要移动的距离，最后通过设置自定义导航的top值来实现导航栏位置的移动。

  focus: function (e) {
    var that = this;
    var query = wx.createSelectorQuery().in(this);
    query.select('.input-box').boundingClientRect(function (rect) {
      that.setData({
        inputTop: rect.top
      })
    }).exec();
    var navTop = that.data.navTop;
    that.setData({
      navTop: navTop - (that.data.inputTop + 30)
    })
  },
  blur: function (e) {
    var that = this;
    var navTop = that.data.navTop;
    that.setData({
      navTop: navTop + (that.data.inputTop + 30)
    })
  }

3. 给予页面足够的高度
   在页面onLoad()生命周期函数中获取设备的屏幕高度，并将数据存储在变量screenHeight 中，而后将页面的最小高度设置为屏幕高度减去自定义导航的高度，再减去输入框的高度，最后再减去输入框距离页面顶部的距离。

    onLoad: function () {
      var that = this;
      wx.getSystemInfo({
        success: function (res) {
          that.setData({
            screenHeight: res.screenHeight
          })
        }
      });
      that.querySelect();
    },
    onReady: function () {
      var that = this;
      setTimeout(function () {
        var query = wx.createSelectorQuery().in(that);
        query.select('.input-box').boundingClientRect(function (rect) {
          that.setData({
            minHeight: that.data.screenHeight - that.data.navTop - rect.height - 30
          })
        }).exec();
      }, 1000)
    }

经历以上三步骤，我们便成功解决了小程序中底部输入框获焦点时让页面中的自定义导航移除界面导致页面展示错乱的问题。在实际的开发中，除了这一类问题，我们还可能会遇到很多奇怪的现象，就像我们遇到的微信小程序富文本编辑器中插入图片，在安卓手机上使用微信小程序内置的图片上传接口进行图片上传时，如果上传的图片宽高比过大，则导致图片无法上传，这个问题就很奇怪，我们尝试了很多办法也没有解决这个问题，最终只能使用第三方图片上传接口来解决这个问题。