解決uni-app微信小程序底部輸入框，鍵盤(pán)彈起時(shí)頁(yè)面整體上移 問(wèn)題

轉(zhuǎn)發(fā)自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250

存在問(wèn)題
做了一個(gè)記錄頁(yè)面（類(lèi)似單方聊天頁(yè)），輸入框在底部；當(dāng)彈出鍵盤(pán)時(shí)，頁(yè)面整體上移，頁(yè)面頭信息會(huì)消失不見(jiàn)

需要實(shí)現(xiàn)效果：
比如一個(gè)記錄頁(yè)面，需要在鍵盤(pán)彈出時(shí)：

• 底部的輸入框跟隨鍵盤(pán)上彈
• 頁(yè)面頭固定在頂部不動(dòng)
• 聊天信息區(qū)域（即內(nèi)容區(qū)）調(diào)整高度，該區(qū)域局部滾動(dòng)

解決方法

• 底部輸入框fixed定位在底部，使用輸入框的@focus獲取鍵盤(pán)高度，更改輸入框bottom；@blur時(shí)恢復(fù)bottom=0；
• 使用包含頁(yè)面頭和內(nèi)容區(qū)

1. container的padding-bottom設(shè)置為輸入框高度+輸入框bottom，避免被輸入框和鍵盤(pán)遮擋；并設(shè)置為flex column布局
2. 頭部定高（如果不定高可以不設(shè)置）；
3. 內(nèi)容區(qū)設(shè)flex-grow：1，overflow-y:auto; 使其自適應(yīng)高度并實(shí)現(xiàn)滾動(dòng)；

實(shí)現(xiàn)代碼

<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, //每條數(shù)據(jù)平均高度，為確保能滾到底部，可以設(shè)置大一些
      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>