小程序组件input:真机键盘弹窗遮盖输入框一部分样式_飞书小程序咋覆盖:host input 样式-优快云博客

本文链接：https://blog.youkuaiyun.com/G_wendy/article/details/84134574

问题：默认没有点击input输入框（评论框）的时候：

点击了input组件，键盘弹起时，自动上推页面，默认键盘弹窗弹出到位置是input组件输入聚焦位置（就是输入框的光标一直闪烁的位置）；所以就是没有设置input组件和键盘的位置距离导致的覆盖相关样式现象。

解决方法：

1：可以设置cursor-spacing 的属性距离

2：使用bindfocus、bindblur 操作函数来动态设置底部组件框与底部之间的距离（外边距）：margin-bottom:30rpx;

js data里面设置一个变量：inputMarBot: false, //评论框聚焦时，让评论框距离底部的距离为30rpx
wxml 页面：使用三元表示设置style input组件的父元素容器与底部外边距：<view class='' style="{{inputMarBot?'margin-bottom:50rpx':''}}">（关键，主要跟input的聚焦和是去焦点有关）及input组件定义属性：bindfocus='settingMbShow' bindblur='settingMbNoShow'
方法：

 // 评论输入框聚焦时，设置与底部的距离
  settingMbShow: function () {
    this.setData({
      inputMarBot: true
    })
  },
  //  评论输入框失去聚焦时，设置与底部的距离（默认状态）
  settingMbNoShow: function () {
    this.setData({
      inputMarBot: false
    })
  },

效果：