微信小程序-点击按钮弹出软键盘

1.实现目标：

                                                 

即点击右下角的按钮，弹出输入框以及软键盘，并且按钮消失。

2.设计：

ps.当input组件获取到焦点时才会弹出软键盘，所以foucs可以设置为true或者auto，如果设置为false则不会弹出软键盘。

3.代码实现：

wxml：

  
  0.0我是自定义标题栏





  
  
    
      发送
    
  

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight: getApp().globalData.statusBarHeight,
    showInput: false, //控制输入栏
  },

  //返回上一层
  goback() {
    wx.navigateBack({
      success(res) {
        console.log("返回成功")
      },
      fail(res) {
        console.log("error")
      }
    })
  },

  //点击出现输入框
  showInput: function() {
    this.setData({
      showInput: true
    })
    console.error('show+++++++++++')
  },
  //隐藏输入框
  onHideInput: function() {
    this.setData({
      showInput: false
    })
    console.error('hide+++++++++++')
  },

})

wxss：

.input-section {
    position: absolute;
    display: flex;
    align-items: center;
    height: 110rpx;
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    z-index: 500;
    background: #fff;
}

.input_input {
    background: #fff;
    margin-top: 12rpx;
    z-index: 500;
    width: 580rpx;
    height: 110rpx;
    padding-left: 35rpx;

}

.send_btn {
    width: 110rpx;
    height: 66rpx;
    position: absolute;
    top: 24rpx;
    right: 30rpx;
    background: rgb(47, 80, 19);
    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;
}

4.实现效果图：

效果图在开头已经展示过了，一个比较简单的点击弹出输入框功能。

ps.此功能随处可见，例如一些全面屏直播的小程序，利用的就是这个原理，当然还是需要做一些调整的。此外，本代码用的是自定义标题栏，对这块不是很了解的可以翻看前面的博客，有专门的例子和讲解。

 

本人是前端小白一枚，希望大家多多指教，如果文章内有什么问题也请大家多多指出，谢谢！