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

目录

一、问题

二、解决

---

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

一、问题

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

---

二、解决

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

直接贴代码：

wxml：

<!-- 评论 -->
 <view class="say"  style='bottom:{{inputBottom}}px'>
  <image src="/imgs/share.png"></image>
  <text>分享</text>
  <view class="say1">
    <input type="text" value="{{ say }}" placeholder="请输入内容"  bindfocus="foucus" bindblur="blur"   adjust-position='{{false}}' />
  </view>
  <view class="send">
    <text>发送</text>
  </view>
</view>

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
  })
},

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

 拜~~~