[dcloudio/uni-app]希望textarea能设置最大高度,在自动增高时超出最大高度可滚动

2023-12-09 341 views
3

新功能描述 类似微信聊天输入框,高度可自动增高,当大于5行以上出现滚动条可滚动

现状及问题 目前设置固定高度编译APP,不能滚动,设置自增高页面又不好看

尝试方案 嵌套了一层scroll-view,但软件盘的换行不能自动滚动到底部,或一直输入文字每次换行超出一个字时也不会滚动到底部。 目前做法:监听输入框高度变化设置scroll-top,感觉不是很流畅

回答

5

开启auto-height时H5和App(V3)设置max-height(css)即可,其他端效果如有问题可以同时监听linechange事件关闭auto-height

9

设置了max-height会有一个固定高度,期望效果是默认显示一行的高度,当输入高度超过3行就自动出现滚动条。目前是用 scroll-view + auto-height + 监听linechange 实现的

1

不需要scroll-view

1

此用户已在非nvue下实验过类似效果 #1122

3

这链接是问题,并没有解决方案啊。我的问题和他查不多,加了max-height也没滚动效果,而且不能开始显示一行自动增高,然后出滚动条。回头我再试试

2

是问题,不过他反馈的nvue页面的问题,已先说明mp和小程序正常。

7

演示效果GIF图: 未命名

7

小程序和h5是正常可以使用的。linechange就可以实现动态高度变化。

我那个是nvue页面,在app端linechange无法监听。所以一直在找app端的替代方案。后来ios上面出来了一个差不多的替代方案,但是安卓不正常。

0

我的是APP而且是vue页面,只用max-height + auto-height,样式正常,但超出高度为啥上下滑不动

6

auto-height 不支持 滚动。

nvue页面在mp/h5实现的,在vue页面照样实现,是一样的。

1

那怎么实现类似聊天的底部输入框,高度自动变化,当超过一定高度,就让他出滚动条,可上下滑动看之前输入的内容

3

不是说了用linachange莫。linechange监听到的时候,直接设置高度,而不是max-ehight。

这个在vue页面是可以的。不管那个端。

不过记得设置line-height,否则无法获取到当前有几行。

6

可用用纯css实现,只需要在input外包裹两层textarea

2

这种方案对于键盘输入是可以,但是有个问题,如果是直接拷贝粘贴大段文本,linechange 就不能及时更新,导致高度无限增加

截屏2022-05-13 10 51 47
4

不是说了用linachange莫。linechange监听到的时候,直接设置高度,而不是max-ehight。 这个在vue页面是可以的。不管那个端。 不过记得设置line-height,否则无法获取到当前有几行。

这种方案对于键盘输入是可以,但是有个问题,如果是直接拷贝粘贴大段文本,linechange 就不能及时更新,导致高度无限增加

请问下这种情况有解决办法吗