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

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

相关推荐
iOS阿玮2 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW20 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端2 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
today喝咖啡了吗2 天前
uniapp项目中node_modules\sass\sass.dart.js的体积过大怎么处理
javascript·uni-app·sass
遗憾随她而去.3 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app