微信小程序，输入时键盘弹起，聊天输入框自动弹起，内容不顶起

最新推荐文章于 2025-05-08 18:06:07 发布

程序员老罗

最新推荐文章于 2025-05-08 18:06:07 发布

阅读量7.5k

点赞数 5

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_45574655/article/details/114685181

本文介绍了一种在移动端应用中实现键盘弹出时聊天内容不被遮挡的方法。通过监听键盘高度变化并动态调整聊天区域高度，确保了良好的用户体验。代码示例使用了微信小程序的API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果

代码：

index.js

const app = getApp()
Page({
  data:{
    statsuBarHeight: app.globalData.statsuBarHeight,
    headHeight:40,
    chatListHeight:0,
    keyboardHeight:0,
    messageList:[],
    inutPanelHeight:50,
    toView: "item0",
    curMessage:"",
  },
  onLoad(){
    this.setChatListHeight();
    wx.onKeyboardHeightChange(res => { //监听键盘高度变化
      this.setData({
        keyboardHeight: res.height
      });
      this.setChatListHeight();
      this.scroll2Bottom();
    });
  },
  setChatListHeight() {
    this.setData({
      chatListHeight: app.globalData.sysHeight - app.globalData.statsuBarHeight - this.data.headHeight - this.data.keyboardHeight- this.data.inutPanelHeight
    })
  },
  hideKeyboard(){
    wx.hideKeyboard();
    this.hideMediaPanel();
  },
  getInput(e){
    let value = e.detail.value;
    this.setData({
      curMessage: value
    });
  },
  send() {
    let curMessage = this.data.curMessage;
    if (curMessage.trim() === "") {
      wx.showToast({
        title: '请输入聊天内容',
        duration: 2000,
        icon: "none"
      })
      return;
    }
    let messageList = this.data.messageList;
    messageList.push(curMessage);
    this.setData({
      curMessage:"",
      messageList:messageList
    })
  },
})

index.json

{
  "navigationStyle":"custom"
}

index.wxml

<view class="header" style="top:{{statsuBarHeight}}px">
    聊天
</view>
<scroll-view class="message-list" style="top:{{statsuBarHeight+headHeight}}px;height:{{chatListHeight}}px"
    scroll-y="true" scroll-into-view="{{ toView }}" bindtap="hideKeyboard">
    <block wx:for="{{messageList}}" wx:key="index" wx:for-item="item">
      <view>{{item}}</view>
    </block>
</scroll-view>
<view class="input-panel" style="bottom:{{keyboardHeight}}px">
  <input adjust-position="{{false}}" hold-keyboard="{{true}}" bindinput="getInput" value="{{curMessage}}"/>
  <view class="send-btn" bindtap="send">发送</view>
</view>

index.wxss

.header{
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #dddd;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.message-list{
  position: fixed;
  width:100%;
}
.input-panel {
  display: flex;
  background: #dddddd;
  height: 50px;
  position: fixed;
  width:100%;
  padding:0px 10px;
  align-items: center;
  box-sizing: border-box;
}

.input-panel input {
  flex: 1;
  width: 100%;
  background: #ffffff;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  padding:0px 5px;
  border-radius: 3px;
}

.send-btn {
  display: inline-block;
  padding: 0px 10px;
  color: #fff;
  background: green;
  border-radius: 3px;
  line-height:30px;
  margin-left:5px;
}

app.js

// app.js
App({
  globalData: {
    statsuBarHeight:0,
    sysWidth:0,
    sysHeight:0,
  },
  onLaunch() {
    const res = wx.getSystemInfoSync()
    var statusbarH = res.statusBarHeight
    this.globalData.statsuBarHeight=statusbarH;
    this.globalData.sysWidth = res.screenWidth;
    this.globalData.sysHeight = res.screenHeight;
  },
})

主要思路就是，弹出键盘后，不把内容顶起来，我们监听键盘高度变化，自动设置输入框和内容的高度，已达到比较好的体验

完整版预览：