uniapp文本框上下滚动问题

有梦想的刺儿2024-05-07 23:09

一个基本需求，textarea标签没有办法通过手拖动的方式进行滚动，当文字超出其容量后，想要编辑上面被遮挡部分的文字这边难以点到，电脑可以鼠标滚轮，但手机需要拖动但无效：

下面提供了我的解决思路：

1.首先先设置autoHeight是得textarea自适应高度：

html 复制代码

<textarea class="text_field" autoHeight placeholder="请输入文字~" v-model="XXX" maxlength="300"></textarea>

2.对其设置最小高度以撑起容器

css 复制代码

.text_field {
	min-height: 300rpx;
	width: 100%;
}

3.想要滚动，用可滚动标签包裹

html 复制代码

<scroll-view style="white-space: nowrap;" class="text_field_outer" scroll-y>
	<textarea class="text_field" placeholder="请输入文字~" v-model="XXX" maxlength="300" autoHeight></textarea>
</scroll-view>

4.scroll-view参考

css 复制代码

.text_field_outer {
	margin-top: 20rpx;
	border: 1px solid lightgray;
	background-color: #fff;
	box-sizing: border-box;
	display: inline-block;
	height: 400rpx;
	padding: 1vh 1vw;
	position: relative;
}

5.(不必要)可添加字数统计

html 复制代码

// 同级添加，外部别忘包裹relative容器
<span class="text_number">{{XXX.length}}/300</span>

底部留白：

css 复制代码

.text_field_outer {
	padding-bottom: 55rpx;
}

之后即可生效（不会做gif，脑补下吧。。。TAT）：

希望本文会对您有所帮助~ ^_^