美文网首页前端新手
小程序键盘遮盖输入框

小程序键盘遮盖输入框

作者: 刘员外__ | 来源:发表于2019-12-13 17:10 被阅读0次

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

    <!-- 回复评论弹框 -->
        <van-popup 
          :show="handelScreenAddBox"
          position="bottom"
          suctom-style="height: auto"
          @close="handelScreenAddBoxClose"
          catchtouchmove
        >
          <!-- 使用的van组件,回复框是从下弹出,可以设置盒子高度,也可以设置定位,直接设置盒子高度的话,可以省两行css代码 -->
          <div 
            class="addBoxBox" 
            :style="{height:areaBottom + 'px'}"
          >
            <!-- input内需要绑定:adjust-position="false"(键盘弹起时,是否自动上推页面) 然后分别注册个获取焦点和失去焦点事件 -->
            <input 
              @change="(value)=>{newBox = value.mp.detail.value}" 
              :value="newBox"
              :adjust-position="false"
              @focus="areaFocus"
              @blur="areaBlur"
            >
            <div @click="submitAddBoxOrReply">{{replyOrAddKeyWord}}</div>
          </div>
        </van-popup>
    

    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
    

    相关文章

      网友评论

        本文标题:小程序键盘遮盖输入框

        本文链接:https://www.haomeiwen.com/subject/qcyfnctx.html