底部输入框适配 - input

<template>
  <view class="container">
    <view class="content">
      <view v-for="item in 100" :key="item">
        {{ item }}
      </view>
    </view>
    <view class="bottom-input">
      <view class="input-action">操作区域</view>
      <view class="input-send">
        <input
          type="text"
          class="input-text"
          :placeholder="placeholder"
          :maxlength="100"
          :cursor-spacing="15"
          confirm-type="done"
          v-model="inputValue"
        />
        <view class="send">发送</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      description: "适配聊天框的问题",
      placeholder: "请输入内容",
      inputValue: "",
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  .content {
    // 前面是ios适配无需加bottom-input的高度 ,后面是安卓适配 40+60+114 = 224
    padding-bottom: Max(calc(env(safe-area-inset-bottom) + 184rpx), 224rpx);
  }
  .bottom-input {
    background: red;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: Max(env(safe-area-inset-bottom), 40rpx);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .input-action {
      background: blue;
      width: 100%;
      height: 70rpx;
    }
    .input-send {
      background: pink;
      width: 100%;
      height: 114rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12rpx 32rpx 30rpx 32rpx;
      box-sizing: border-box;
      box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
      .input-text {
        flex: 1;
        height: 72rpx;
        border-radius: 44rpx;
        background: #fff;
        margin-right: 32rpx;
        padding: 0 24rpx;
      }
      .send {
        width: 132rpx;
        height: 72rpx;
        border-radius: 44rpx;
        background: #45d0ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 36.4rpx;
        letter-spacing: 0.3rpx;
      }
    }
  }
}
</style>

评论