zcb_APP/pages/myMessage/chat.vue

<template>
  <view class="content">
    <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
      <image
        @click="$navBack()"
        class="w-48 h-48 abs_left"
        style="left: 32rpx"
        src="/static/image/common/left_arrow_icon.png"
        mode="scaleToFill"
      />
      <view class="text-36 text-500 text-070202">用户昵称123</view>
    </view>

    <view class="message-box pdx-32">
      <view class="w flex fd_c ai_center" v-for="item in 5" :key="item">
        <view class="text-20 text-500 text-B9B9B9 mgt-32 mgb-32">
          2025/08/8 16：00
        </view>

        <view class="ims_item w flex ai_center mgb-24">
          <view class="ims_head">
            <image
              class="w-80 h-80 radio-circle"
              src="/static/image/my/my_default_avatar.png"
              mode="scaleToFill"
            />
          </view>
          <view class="ims_conten ims_conten_left mgl-16"
            >这是一条消息内容</view
          >
        </view>

        <view class="ims_item w flex ai_center jc_end mgb-24">
          <view class="ims_conten ims_conten_right mgl-16"
            >这是一条消息内容</view
          >

          <view class="ims_head">
            <image
              class="w-80 h-80 radio-circle"
              src="/static/image/my/user_avatar_80.png"
              mode="scaleToFill"
            />
          </view>
        </view>

        <view class="text-20 text-500 text-B9B9B9 mgt-32 mgb-32"> 16：00 </view>

        <view class="ims_item w flex ai_center mgb-24">
          <view class="ims_head">
            <image
              class="w-80 h-80 radio-circle"
              src="/static/image/my/my_default_avatar.png"
              mode="scaleToFill"
            />
          </view>
          <view class="ims_conten ims_conten_left mgl-16"
            >这是最新一条消息内容</view
          >
        </view>
      </view>
    </view>

    <view class="input_box" :style="{ bottom: bottomVal }">
      <!-- #ifndef APP-NVUE -->
      <u-input
        class="input"
        placeholder="请输入消息内容"
        :adjustPosition="false"
        @focus="inputBindFocus"
        @blur="inputBindBlur"
      >
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <u--input
          class="input"
          placeholder="请输入消息内容"
          :adjustPosition="false"
          @focus="inputBindFocus"
          @blur="inputBindBlur"
        >
          <!-- #endif -->
          <template slot="suffix">
            <image
              class="w-48 h-48 radio-circle"
              src="/static/image/my/emoji_icon.png"
              mode="scaleToFill"
            />
          </template>

          <!-- #ifdef APP-NVUE -->
        </u--input>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
      </u-input>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bottomVal: "",
    };
  },
  onLoad() {},
  onReady() {
    uni.onKeyboardHeightChange((res) => {
      this.bottomVal = res.height + "px";
      console.log("监听到键盘高度：", res.height);
    });
  },
  methods: {
    inputBindFocus(e) {
      // 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值
      // 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 px
      // this.$emit("changeBottomVal", e.detail.height + "px");
      // console.log("e :===>>", e);
      // this.bottomVal = e.detail.height + "px";
      // console.log(" inputBindFocus:===>>", this.bottomVal);
    },
    inputBindBlur() {
      // input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
      // this.$emit("changeBottomVal", 0);
      this.bottomVal = 0;
      console.log(" inputBindBlur:===>>", this.bottomVal);
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .message-box {
    flex: 1;
    // background-color: #d2d1d1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding-bottom: 800rpx;
  }
}

.ims_conten {
  display: inline-flex;
  height: 80rpx;
  padding: 20rpx 24rpx;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  flex-shrink: 0;
  border-radius: 0 24rpx 24rpx 24rpx;

  text-align: center;
  font-family: "MiSans VF";
  font-size: 32rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.66rpx;
}

.ims_conten_left {
  color: #070202;
  background: #f3f4f4;
}

.ims_conten_right {
  color: #ffffff;
  background: #fe6505;
}

.input_box {
  position: absolute; // input 所在盒子设置绝对定位
  flex-shrink: 0;
  width: 100%;
  left: 0;
  bottom: 0; // 默认 0
  z-index: 199;
  padding: 16rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx);
  background: #ffffff;
  box-shadow: 0 -12rpx 24rpx 0 #0000000a;

  .input {
    width: 100%;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 64rpx;
    background: #f6f6f6;
    font-family: "MiSans VF";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 40rpx;
    letter-spacing: 0.66rpx;
  }
}
</style>