【小程序聊天输入框多行内容自动向上增高】

小程序聊天输入框多行内容自动向上增高

实现出来的效果与微信的聊天输入框一致。网上搜索到的方法都是加一个text标签结合flex布局等实现，出来的效果不好，不丝滑。自己研究了一个丝滑的方案出来，目前没有找到一样的，所以记录一下。

原理

利用 textarea 组件的 auto-height 属性结合flex布局元素可以从下向上排列的技巧实现。

代码

textarea 属性小程序都有介绍是什么意思就不解释了
实现此功能的必要属性是auto-height=“true”，其他的是实现对话框需要的属性。

<view class="send" id="send"><textarea class="weui-textarea" maxlength="-1" bindinput="getInput" adjust-position="{{false}}" type="text" confirm-type="send" focus="{{sendInputFocus}}" disabled="{{isDisabled}}" placeholder="和Ta聊聊..." show-confirm-bar="{{false}}" bindconfirm="onConfirm" data-specific="true" catchblur="onBlur" catchkeyboardheightchange="heightchange" catch:linechange="linechange" value="{{sendInfoValue}}" bindfocus="bindfocus" auto-height="true" confirm-hold="true" disable-default-padding="true"></textarea>
</view>

css用到了排列属性的flex-end和flex-start值，外层用于定位和承载输入框的盒子，使用align-items: flex-end;让元素从下向上排列。文本框做了纵轴反转 flex-direction: column-reverse，再改变对齐方式，下面的代码让ai翻译了一下。

.send {width: 100%; /* 宽度为100%，占据父容器的全部宽度 */position: relative; /* 相对定位 */min-height: 76rpx; /* 最小高度为76rpx */margin: 12rpx 0 0 0rpx; /* 外边距：上12rpx，右0，下0，左0rpx */box-sizing: border-box; /* 包括内边距和边框在内计算元素的总宽度和高度 */display: flex; /* 使用弹性布局 */align-items: flex-end; /* 在交叉轴上将子元素对齐到末端 */position: fixed; /* 固定定位 */bottom: 80rpx; /* 距离底部80rpx */
}.weui-textarea {overflow-y: hidden; /* 隐藏垂直方向的滚动条 */word-break: break-all; /* 强制在单词内断行 */word-wrap: break-word; /* 在单词边界处断行 */flex-direction: column-reverse; /* 使子元素在主轴方向上逆序排列 */align-items: flex-start; /* 在交叉轴上将子元素对齐到起点 */justify-content: flex-end; /* 在主轴上将子元素对齐到终点 */margin: 0 16rpx; /* 上下边距为0，左右边距为16rpx */flex: 1; /* 使元素在弹性容器中占据可用空间 */padding: 20rpx 30rpx 20rpx 24rpx; /* 内边距：上20rpx，右30rpx，下20rpx，左24rpx */background: rgba(0, 0, 0, .06); /* 背景颜色为黑色，透明度为6% */border-radius: 24rpx; /* 圆角半径为24rpx */font-size: 28rpx; /* 字体大小为28rpx */font-family: 'PingFang SC'; /* 字体为 'PingFang SC' */font-weight: 500; /* 字体粗细为500 */max-height: 100px; /* 最大高度为100px */
}