解决小程序底部input输入框键盘弹出使页面布局上移问题

目录

一、问题

二、解决

---

学习记录：解决小程序底部input输入框键盘弹出使页面布局上移问题

一、问题

今天在学习小程序时，遇到一个问题，我们设置的底部input输入框，在真机测试时，键盘弹出会使整体页面上移。效果如下动图：

---

二、解决

•  解决：
• 参考链接：小程序input输入框键盘弹出使得布局上移问题_一天一天积累的博客-CSDN博客

直接贴代码：

wxml：

 
  
  分享
  
    
  
  
    发送
  

wxss：

.say {
  height: 100rpx;
  box-shadow: 1px -1px 1px #e3e3e3;
  position: fixed;
  width: 700rpx;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30rpx;
  justify-content: space-between;
  background-color: #fff;
} 
.say image {
  width: 50rpx;
  height: 50rpx;
}
.say .send text   {
  color: #fff;
  font-size: 30rpx;
  border-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90rpx;
  height: 90rpx;
  background-color: rgb(229, 135, 135);
}
 

.say1 {
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80rpx;
  width: 460rpx;
  border-radius: 35rpx;
  font-size: 28rpx;
  padding-left: 20rpx;

}

js：  

// 输入聚焦
foucus: function (e) {
  var that = this;
  that.setData({
  inputBottom: e.detail.height
  })
},
  //失去聚焦
blur: function (e) {
  var that = this;
  that.setData({ 
  inputBottom: 0
  })
},

最后成功解决问题啦~~ 效果如下：

 拜~~~