uniapp文本框上下滚动问题

本文介绍了解决移动端textarea标签无法通过拖动滚动的问题,通过设置autoHeight使高度自适应,使用scroll-view标签包裹textarea并设置合适的样式,实现文本框内容的滚动显示。同时提及了字数统计的实现方法。
摘要由CSDN通过智能技术生成

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

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

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

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

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

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

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

<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参考

.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.(不必要)可添加字数统计

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

底部留白:

.text_field_outer {
	padding-bottom: 55rpx;
}

之后即可生效(不会做gif,脑补下吧。。。TAT):

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值