小程序仿照微信朋友圈点击评论键盘输入

上图:  

简单的代码:

<view bindtap="showInput">评论</view>

<!-- 输入框及发送按钮,模拟类似 朋友圈点击评论样式 -->
<view class="input-section" wx:if="{{showInput}}">
  <input class='input_input' value="{{inputMessage}}" focus="auto" placeholder="评论" bindinput='bindInputMsg' bindblur="onHideInput" confirm-type="send" bindconfirm="sendTextMsg"></input>
  <view style="height:110rpx;170rpx;display:flex; align-items: center;justify-content: center;">
    <view class="send_btn">
      <text class="send_btn_text">发送</text>
    </view>
  </view>
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputMessage:'',//评论的value
  },
  
  //点击出现输入框
  showInput() {
    this.setData({
      showInput: true
    })
  },
  //隐藏输入框
  onHideInput() {
    this.setData({
      showInput: false
    })
  },
  // 评论输入框
  bindInputMsg(e){
    console.log(e.detail.value.replace(/s+/g, ''))
    this.setData({
      inputMessage: e.detail.value.replace(/s+/g, '')
    })
  },
  // confirm-type="send" 键盘底部发送按钮触发函数
  sendTextMsg(e){
    console.log(e.detail.value)
  },
})

/* 点赞 评论触发键盘输入 的input样式 */
.input-section {
    position: fixed;
    display: flex;
    align-items: center;
    height: 110rpx;
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    z-index: 500;
    background: #f2f2f2;
}
 
.input_input {
    background: #fff;
    margin-left: 12rpx;
    z-index: 500;
     580rpx;
    height: 94rpx;
    padding-left: 35rpx;
    font-size: 30rpx;
    border-radius: 6rpx
}
 
.send_btn {
     140rpx;
    height: 79rpx;
    position: absolute;
    top: 13rpx;
    right: 14rpx;
    background: var(--green);
    z-index: 550;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.send_btn_text {
    display: flex;
    font-size: 32rpx;
    font-family: 'PingFang';
    color: #fff;
    z-index: 560;
}