微信小程序聊天室页面开发教程：自定义导航栏与键盘弹出适配问题解决

✨ 前言

在微信小程序开发中，使用自定义导航栏可以让界面更加个性化，但常常会遇到一个问题——键盘弹出时页面被顶起，影响用户体验。本文将基于一个简单的聊天室页面示例，详细介绍如何解决该问题，并实现一个具有自定义导航栏的聊天界面。

📜 功能概述

本教程实现的主要功能包括：

1. 自定义导航栏，替代微信小程序原生导航栏。

2. 实时监听键盘高度变化，自动适配聊天输入框位置，防止页面被顶起。

3. 基础聊天功能，实现消息输入与发送。

4. 聊天界面样式美化，提供舒适的聊天体验。

🛠️ 项目结构与配置

1. app.json 配置

在页面配置中关闭原生导航栏：

{
  "pages": [
    "pages/chat/index"
  ],
  "window": {
    "navigationStyle": "custom"
  }
}

💡 核心功能实现

2. 页面逻辑 (index.js)

Page({
  data: {
    statusBarHeight: 0,
    keyboardHeight: 20,
    chatList: [
      { id: 1, from: "me", message: "你好！" },
      { id: 2, from: "other", message: "你好，请问有什么可以帮您？" },
    ],
    inputValue: "",
  },

  onLoad() {
    const systemInfo = wx.getSystemInfoSync();
    this.setData({ statusBarHeight: systemInfo.statusBarHeight });

    // 监听键盘高度变化
    wx.onKeyboardHeightChange((res) => {
      this.setData({ keyboardHeight: res.height === 0 ? 20 : res.height });
    });
  },

  onInput(e) {
    this.setData({ inputValue: e.detail.value });
  },

  sendMessage() {
    const { inputValue, chatList } = this.data;
    if (!inputValue.trim()) return;

    chatList.push({ id: Date.now(), from: "me", message: inputValue });
    this.setData({
      chatList,
      inputValue: "",
    });
  },

  goBack() {
    wx.navigateBack();
  }
});

🔑 关键点解析

• 状态栏高度适配：使用 wx.getSystemInfoSync() 动态获取状态栏高度，确保自定义导航栏不会被遮挡。

• 键盘高度监听：通过 wx.onKeyboardHeightChange 监听键盘高度变化，实时调整输入框位置，解决键盘弹出页面上移问题。

🎨 页面结构与样式

3. 页面结构 (index.wxml)

<view class="container">
  <view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
    <van-icon name="arrow-left" size="40rpx" custom-class="nav-icon" catch:tap="goBack" />
    <view class="nav-title">聊天</view>
    <view></view>
  </view>

  <scroll-view scroll-y class="chat-container" style="height: calc(100vh - {{statusBarHeight + 50}}px);" scroll-with-animation>
    <block wx:for="{{chatList}}" wx:key="id">
      <view class="chat-item {{item.from === 'me' ? 'chat-right' : 'chat-left'}}">
        <view class="chat-message">
          <text>{{ item.message }}</text>
        </view>
      </view>
    </block>
  </scroll-view>

  <view class="input-container" style="margin-bottom: {{keyboardHeight}}px;">
    <view class="mode icon-box">
      <image src="/assets/telephone.png" class="icon-image"></image>
    </view>
    <input class="chat-input" placeholder="输入消息..." bindinput="onInput" bindconfirm="sendMessage" confirm-type="send" />
    <view class="send icon-box">
      <image src="/assets/voice.png" bindtap="sendMessage" class="icon-image"></image>
    </view>
  </view>
</view>

4. 样式设计 (index.wxss)

/* 页面整体容器 */
.container {
  background: linear-gradient(135deg, #e3eeff, #e8e0ff);
  height: 100vh;
  flex-direction: column;
}

/* 自定义导航栏 */
.custom-navbar {
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-title {
  font-size: 32rpx;
  color: #5f6368;
}

/* 聊天容器 */
.chat-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  padding: 30rpx;
}

/* 聊天消息样式 */
.chat-left text {
  background-color: #ffffff;
  color: #000;
  padding: 16rpx;
  border-radius: 20rpx;
  max-width: 80%;
}

.chat-right text {
  background-color: #95ec69;
  color: #fff;
  padding: 16rpx;
  border-radius: 20rpx;
  max-width: 80%;
}

/* 输入框区域 */
.input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: calc(100vw - 60rpx);
  height: 100rpx;
  background: linear-gradient(135deg, #eaeaf3b4, #fdfaf5, #f8f1e7);
}

⚡ 关键问题解决方案

🎯 键盘弹出导致页面上移问题

在微信小程序中，自定义导航栏下，键盘弹出时页面会被顶起。通过 wx.onKeyboardHeightChange 方法，可以获取键盘弹出时的高度变化，并动态设置输入框的 margin-bottom，以便输入框始终处于键盘之上。

wx.onKeyboardHeightChange((res) => {
  this.setData({ keyboardHeight: res.height === 0 ? 20 : res.height });
});

📝 结语

通过以上实现，我们不仅完成了一个基础的聊天室页面，还成功解决了在使用自定义导航栏时，键盘弹出导致页面上移的问题。希望本教程能为你在微信小程序开发中提供帮助！

💬 如果你有任何问题或更好的优化建议，欢迎在评论区留言交流！