uniapp文本框上下滚动问题

一个基本需求,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):

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

相关推荐
2501_915921432 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs2 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟2 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农2 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q19632884752 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
不知名的前端专家4 小时前
UniApp USB存储设备U盘操作、读写原生插件
uni-app
coldriversnow4 小时前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app
2501_915918416 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview
Q_Q51100828519 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php