解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移问题_uniapp输入框底部

存在问题

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

需要实现效果：

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

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

解决方法

• 底部输入框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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158