支付宝小程序实现类似微信多行输入框滚动效果

作者：交互手记时间：2026-11-01 02:00:20浏览：378

本文详解在支付宝小程序中实现类似微信的多行输入框滚动效果。通过对比三种思路，最终利用支付宝原生组件的特定CSS类名，设置max-height与auto-height，完美解决输入框高度溢出及光标透出的问题，实现固定高度内的自动增高与滚动。

首先观察微信小程序中输入框的展示效果。

尝试第一种方案：

当输入内容超过8行时，输入框会出现滚动条。这种设计的优势在于防止输入框直接顶到页面最顶部，保持界面美观。

在支付宝小程序中实现多行输入框，主要依赖textarea组件。

尝试第一种方案：

为textarea标签设置max-height属性，并利用其自带的auto-height属性实现自动增高。

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <textarea placeholder="Input multiple lines" auto-height maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
  </view>
</view>
// css 
.textarea {
  max-height: 150rpx !important;
  overflow-y: scroll;
}

实际测试发现，最大高度限制并未生效，输入框会无限增高，因此该方法不可行。

尝试第一种方案：

尝试第二种方案：

将多行文本框包裹在一个容器中，为该容器设置最大高度并启用Y轴滚动。

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" auto-height maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}">
      </textarea>
    </view>
  </view>
</view>
// css
.textarea-content {
  max-height: 150rpx !important;
  overflow-y: scroll;
}

该方案虽然可以实现滚动，但在iOS设备上会出现问题：超出部分被选中时，页面会透出光标；且光标在滚动层内也会异常显示。

尝试第一种方案：

尝试第三种方案：

将多行文本框设置为绝对定位，高度设为100%。同时增加一个兄弟元素，设置其max-height。通过监听输入事件记录输入的value，并将value渲染到该兄弟元素中，由兄弟元素撑开父元素，从而使文本框随之自动增高或减少。

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" onInput="onInput"  maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
      <text class="textarea-brother">{{value}}</text>
    </view>
  </view>
</view>
// css
.textarea-content {
  position: relative;
}
.textarea {
  height: 100%;
  position: absolute;
  top: -150rpx;
  height: 100%;
  width: 100%;
}
.textarea-brother {
  width: 100%;
  min-height: 42px;
  display: block;
  max-height: 150rpx;
  word-break: break-all;
  word-wrap: break-word;
}

此方案解决了光标超出滚动层的问题，但存在局限：input只能监听到直接输入到输入框的字。当输入法切换到中文时，拼音会先占用输入框高度，期望的高度虽能增高，但由于监听不到输入事件，这种处理方法会遮盖拼音显示。

最终解决方案：

获取到支付宝原生组件的样式表链接地址：https://open.alipay.com/portal/forum/post/120501011

尝试第一种方案：

通过命名推测，这是文本输入框内容的样式class属性值。通过修改该样式设置max-height，并开启自动增高功能，即可完美实现多行输入到一定高度后不再增高，转而进行滚动的效果。

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" onInput="onInput" maxlength="{{-1}}" auto-height  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
      <!-- <text class="textarea-brother">{{value}}</text> -->
    </view>
  </view>
</view>
// css
.textarea {
  .a-textarea-content {
    max-height: 150rpx !important;
  }
}

最终实现效果如下：

尝试第一种方案：

至此，关于支付宝小程序实现类似微信多行输入功能的介绍完毕。更多相关支付宝实现微信多行输入内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

作者最新文章

JS怎么实现页面强制刷新

2026-11-05 14:53:38

点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法

2026-11-05 12:12:23

怎么封装一个通用的JS创建元素辅助函数

2026-11-05 11:41:41

Swiper.js 怎么监听滑动结束并获取当前索引

2026-11-05 10:57:15

HTML、CSS和JS的关系：Web前端三件套怎么协作

2026-11-04 15:41:40