小程序键盘遮盖输入框

使用的van组件，回复框是从下弹出，可以设置盒子高度，也可以设置定位，直接设置盒子高度的话，可以省两行css代码

    
      
      

        
        
        
{{replyOrAddKeyWord}}
      
    

js

areaBottom: 60 // data中，areaBottom默认设置60，即盒子高度

areaFocus (e) { // input获取焦点后，让addBoxBox高度增加
  if (this.isX) { // 判断是否为iPhoneX，因为是从底部弹出的，多做20px的适配
    this.areaBottom = e.detail.height + 40 // 键盘的高度+addBoxBox的高度
  } else {
    this.areaBottom = e.detail.height + 60
  }
},
areaBlur () {
  this.areaBottom = 60  // 失去焦点后，让input归位
},

css

.addBoxBox
  width 375px
  padding 12.5px
  background #fff
  box-sizing border-box
  display flex
  justify-content space-between
  input
    width 277px
    height 35px
    background #F4F5FA
    padding 10px 9px
    box-sizing border-box
    font-size 14px
    line-height 15px
    color #252525
    resize none
  div
    width 55px
    height 35px
    border-radius 2px
    background #2361FF
    font-size 13px
    color #ffffff
    line-height 35px
    text-align center