转-解决uni-app输入框被键盘挡住问题

存在问题

做了一个记录页面(类似单方聊天页),输入框在底部;当弹出键盘时,页面整体上移,页面头信息会消失不见

需要实现效果:

比如一个记录页面,需要在键盘弹出时:

  • 底部的输入框跟随键盘上弹
  • 页面头固定在顶部不动
  • 聊天信息区域(即内容区)调整高度,该区域局部滚动

解决方法

  • 底部输入框fixed定位在底部,使用输入框的@focus获取键盘高度,更改输入框bottom;@blur时恢复bottom=0;
  • 使用包含页面头和内容区
  1. container的padding-bottom设置为输入框高度+输入框bottom,避免被输入框和键盘遮挡;并设置为flex column布局
  2. 头部定高(如果不定高可以不设置);
  3. 内容区设flex-grow:1,overflow-y:auto; 使其自适应高度并实现滚动;

实现代码

<template>
  <view>
    <view class="container" :style="{'padding-bottom': `${52+inputBottom}px`}">
      <view class="header">我是头部</view>
      <scroll-view class="content" :scroll-y="true" :scroll-top="scrollTop">
        <view>
          <view class="message" v-for="(item,index) in records" :key="index">
            <view class="message-content" v-html="item.content"></view>
            <view class="message-time">{{item.updateTime}}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="bottom-textarea" :style="{bottom: inputBottom+'px'}">
      <view class="textarea-container">
        <textarea
          v-model="recordInput"
          :maxlength="-1"
          :auto-height="true"
          :show-confirm-bar="false"
          :cursor-spacing="10"
          :fixed="true"
          :adjust-position="false"
          @focus="focusTextarea"
          @blur="blurTextarea"
        />
      </view>
      <button @click="addRecord" class="primary-btn">记录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [],
      recordInput: "",
      itemAverageHeight: 500, //每条数据平均高度,为确保能滚到底部,可以设置大一些
      scrollTop: 1000,
      inputBottom: 0,
    };
  },
  methods: {
    getList() {
      uni.showNavigationBarLoading();
      //   获取记录信息
      this.$api
        .getRecords()
        .then((res) => {
          this.records = res.reverse().map((item) => ({
            ...item,
            content: item.content.replace(/\n/g, "<br/>"),
          }));
          if (this.records.length > 0)
            this.scrollTop = this.itemAverageHeight * this.records.length;
        })
        .finally(() => {
          uni.hideNavigationBarLoading();
        });
    },
    addRecord() {
      const trueValue = this.recordInput.trim();
      this.$api.addRecord(trueValue).then(() => {
        this.records.push({
          content: trueValue.replace(/\n/g, "<br/>"),
          updateTime: new Date(),
        });
        this.recordInput = "";
        this.scrollTop = this.scrollTop + this.itemAverageHeight; //滚到底部
      });
    },
    focusTextarea(e) {
      this.inputBottom = e.detail.height;
      this.scrollTop += 1; //滚到底部
    },
    blurTextarea(e) {
      this.inputBottom = 0;
      this.scrollTop += 1; //滚到底部
    },
  },
  onLoad(options) {
    this.getList();
  },
};
</script>

<style lang="less">
@left-right-margin: 40rpx;
.container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: 52px;
  display: flex;
  flex-direction: column;
  .header {
    flex-shrink: 0;
    padding: 0px @left-right-margin 32rpx @left-right-margin;
  }
  .content {
    flex-grow: 1;
    overflow: auto;
    .message {
      margin: 0px @left-right-margin 32rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .message-content {
        width: auto;
        max-width: calc(100vw - 80rpx);
        word-wrap: break-word;
        box-sizing: border-box;
        padding: 32rpx;
        line-height: 48rpx;
        background: pink;
        border-radius: 16rpx 0px 16rpx 16rpx;
      }
      .message-time {
        line-height: 32rpx;
        margin-top: 16rpx;
      }
    }
  }
}
.bottom-textarea {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #f2f2f2;
  border-top: 2rpx solid rgba(226, 226, 226, 1);
  padding: 6px 20px;
  display: flex;
  align-items: flex-end;
  .textarea-container {
    flex: 1;
    min-height: 80rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    > textarea {
      max-height: 250rpx;
      font-size: 36rpx;
      color: rgba(8, 8, 8, 1);
      width: auto;
    }
  }

  > button {
    flex-shrink: 0;
    height: 80rpx;
    margin: 0;
    margin-left: 16rpx;
  }
}
</style>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值