【小程序】点击评论弹出输入框，自定义输入框，防止遮盖。

一、目的

解决输入框被遮盖问题

自定义输入框样式

二、前期效果

.commentInputView{
  width: 100%;
  background-color: rgba(204, 204, 204, 0.61);
  padding: 4%;
  position: fixed;
  display: flex;
  justify-content: space-between;
  bottom: 0;
}

要点：

 

style='bottom:{{height == ""?0:height}}px;'

这里需要靠input组件中的聚焦事件来获取高度，从而让输入框的高度随之变化并出现。

相关JS：

inputFocus(e) {
    console.log(e, '键盘弹起')
    this.setData({
      height: e.detail.height,
      isInput: true
    })
  },

手机上具体效果如下：

三、完整代码：

xml

<text style='background-color:#ccc;' bindtap='focusButn'>这是一条评论</text>

<view class='commentInputView' style='bottom:{{height == ""?0:height}}px;' hidden='{{!isInput}}'>

  <view  class='commentInput'>
    <input class='input' maxlength='-1' value="{{value}}" bindfocus="inputFocus" focus='{{focusInput}}' bindblur="inputBlur"></input>
  </view>
  <button class='send'>发送</button>
</view>

JS：

// pages/input/input.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    focusInput: false,
    height: '',
    isInput: false
  },
  inputFocus(e) {
    console.log(e, '键盘弹起')
    this.setData({
      height: e.detail.height,
      isInput: true
    })
  },
  inputBlur() {
    console.log('键盘收起')
    this.setData({
      isInput: false
    })
  },

  focusButn: function () {
    this.setData({
      focusInput: true,
      isInput: true
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

CSS：

/* pages/input/input.wxss */
page{
  width: 100%;
}
.commentInputView{
  width: 100%;
  height: 100rpx;
  background-color: rgba(204, 204, 204, 0.61);
  padding: 4%;
  position: fixed;
  display: flex;
  justify-content: space-between;
}
.commentInput{
  width:70%;
  background-color:#fff;
  font-size:28rpx;
  border-radius:15rpx;
  display: flex;
  align-items: center;
}

.input{
  width:100%;
  padding: 15rpx;
  font-size: 30rpx;
  margin: 0 auto;
  overflow: hidden;
  line-height-step:20rpx;
  border: 0;
}
.send{
  width: 20%;
  height: 80rpx;
  color: #fff;
  font-size: 34rpx;
  background-color: green;
  border: 0;
}

具体显示没有问题，就是第一次的时候，因为键盘弹起的速度比较快，所以第一次就会*2的高度

这样我们可以用一个缓存来记录手机的键盘高度，当然这是在有之前输入文字操作的情况下才能缓存得了。

 

 

但是实际结果就是在键盘的高度上，因为他只是隐藏了

不过效果还是有的

以后想到更好的解决方案再来分享