支付宝小程序实现类似微信多行输入

先来看看微信小程序输入框展示效果:

输入超过 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;
  }
}

效果如下:

相关推荐
2501_916007472 小时前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张3 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909064 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
simon_93495 小时前
微信小程序(H5)上传文件到阿里云 OSS(使用 STS 临时凭证)
阿里云·微信小程序·小程序·html5
2501_915918416 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
老师可可7 小时前
成绩查询系统如何制作?
经验分享·学习·小程序·excel·学习方法
2501_915921437 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918417 小时前
iOS 26 应用管理实战 多工具协同构建开发与调试的高效体系
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
游戏开发爱好者89 小时前
iOS 抓包工具实战 开发者的工具矩阵与真机排查流程
android·ios·小程序·https·uni-app·iphone·webview
TiAmo zhang14 小时前
微信小程序开发案例 | 通讯录小程序(下)
小程序·notepad++