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):

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

相关推荐
FinelyYang16 小时前
uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
前端·javascript·uni-app
浩星16 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
IT 前端 张16 小时前
uni-app在安卓设备上获取 (WIFI 【和】以太网) ip 和 MAC
android·tcp/ip·uni-app
F2E_Zhangmo19 小时前
第一章 uniapp实现兼容多端的树状族谱关系图,创建可缩放移动区域
前端·javascript·uni-app
儿歌八万首19 小时前
UniApp 加载 Web 页面解决方案
javascript·vue.js·uni-app
2501_9159184119 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
半世浮生21 小时前
uniapp开发微信路由踩坑
前端·uni-app
2501_915909061 天前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
军军君011 天前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
小徐_23332 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app