input adjust-position 键盘弹起 + 自定义导航 解决flex定位问题

关键词：adjust-position，键盘弹起 ；"navigationStyle": "custom"；

解决方案：当键盘弹起时，通过已知值计算top偏移；
主要获取数值
键盘高度，窗口高度，获取焦点的输入框的top偏移（主要）；

窗口高度 - 键盘高度 = 可视的高度
输入框Top偏移（主要是这个，在不同位置） - 可视的高度 + 输入框高度 = 相对窗口顶部（top）偏移

wxml 部分

<view  class="navigation-bar" style="{{keyboardHeight > 0?'top:'+OffsetTop +'px':''}}">
     <navigation-bar  /> <!--自定义导航-->
</view>

.navigation-bar{
position: fixed;
top:0;
left:0;
widt:100%;
}

<view>
<view style="height:600px"></view>
<!-- 非必需，看个人需要；cursor-spacing 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 -->
<!-- 必须 id  -->
<!-- 必须 bindfocus bindblur 指向同一个事件-->
<input cursor-spacing="20" id="input-phone" 
bindfocus="getTelIptHeight" bindblur="getTelIptHeight"  
type="text" value="{{phone}}" bindinput="phoneInput" 
placeholder="请输入手机号" placeholder-class="input-placeholder"
 />
</view>

js事件部分

const selectDom = (createSelectorQuery, select) => {
  return new Promise((resolve, reject) => {
    try {
      createSelectorQuery.select(select).boundingClientRect((e) => {
        resolve(e)
      }).exec();
    } catch (error) {
      console.log(error);
    }
  })
}

{
  data:{
      OffsetTop:0,
  },
  getTelIptHeight(e) {
      console.log("height---------", e);
      let keyboardHeight = e?.detail?.height || 0
      this.setData({
        keyboardHeight: keyboardHeight
      })
      // 自定义导航栏逻辑计算
      const windowHeight = wx.getSystemInfoSync().windowHeight; // 获取窗口高度
      const query = wx.createSelectorQuery();
     // selectDom 自己疯装的
      Promise.all([selectDom(query, '#' + e.currentTarget.id)]).then((rect) => {
        console.log(rect[0], windowHeight)
        const inputTop = rect[0]?.top; // 获取输入框的 top偏移
        const bottomOffs = windowHeight - keyboardHeight; // 可视窗口高度
       //输入框偏移位置 - 可视窗口高度 + 自身高度 = 相对窗口顶部（top）偏移
        const Offset = (inputTop - bottomOffs) + rect[0]?.height; 
      console.log('Offset', Offset)
      this.setData({
        OffsetTop: Offset
      })
    })
  }
}