uniapp文本框上下滚动问题

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/7195.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高精地图是怎么构建的?方案有哪些?高精度语义地图构建的一点思考

高精地图是怎么构建的&#xff1f;方案有哪些&#xff1f;高精度语义地图构建的一点思考 高精度(High-Definition, HD)语义地图是目前自动驾驶领域的一个重要研究方向&#xff0c;近年随着Transformer和BEV的大火&#xff0c;很多大佬团队都开展了HD语义地图构建相关的工作。2…

【005_音频开发_基础篇_ALSA_Codec_驱动-MA120x0P功放】

005_音频开发_基础篇_ALSA_Codec_驱动-MA120x0P功放 文章目录 005_音频开发_基础篇_ALSA_Codec_驱动-MA120x0P功放创作背景MA120X0P输出模式BTLSEPBTLSEBTL 硬件配置方式/硬件Limiter限幅器限幅器作用过程 主要寄存器操作指令 ma120x0p.cma120x0p.h 创作背景 学历代表过去、能…

Vue MVVM这一篇就够啦!

Vue vs React 相似之处: 它们都有使用 Virtual DOM虚拟DOM-CSDN博客&#xff1b;提供了响应式&#xff08;Reactive&#xff09;和组件化&#xff08;Composable&#xff09;的视图组件。将注意力集中保持在核心库&#xff0c;而将其他功能如路由和全局状态管理交给相关的库。R…

GreptimeDB 助力国家电网数字换流站打造稳定高效的时序数据底座

电网体系作为现代社会运行的支柱之一&#xff0c;为各行各业、千家万户提供了电能的基本支持。从家庭到企业&#xff0c;医院到学校&#xff0c;交通到通讯&#xff0c;电力电网的应用贯穿始终。近年来&#xff0c;特高压换流站成为国家电网的重点建设工程&#xff0c;“十四五…

vivado Virtex 和 Kintex UltraScale+ 比特流设置

下表所示 Virtex 和 Kintex UltraScale 器件的器件配置设置可搭配 set_property <Setting> <Value> [current_design] Vivado 工具 Tcl 命令一起使用。

RAG 修炼手册|一文讲透 RAG 背后的技术

今天我们继续剖析 RAG&#xff0c;将为大家详细介绍 RAG 背后的例如 Embedding、Transformer、BERT、LLM 等技术的发展历程和基本原理&#xff0c;以及它们是如何应用的。 01. 什么是 Embedding? Embedding 是将离散的非结构化数据转换为连续的向量表示的技术。 在自然语言…

管理能力学习笔记九:授权的常见误区和如何有效授权

授权的常见误区 误区一&#xff1a;随意授权 管理者在授权工作时&#xff0c;需要依据下属的能力、经验、意愿问最自己&#xff1a;这项工作适合授权给Ta做吗&#xff1f;如果没有&#xff0c;可以通过哪些方法进行培训呢&#xff1f; 误区二&#xff1a;缺乏信任 心理暗示…

牛客NC275 和为S的两个数字【简单 map C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/390da4f7a00f44bea7c2f3d19491311b 思路 map参考答案C #include <vector> class Solution {public:vector<int> FindNumbersWithSum(vector<int> array, int sum) {vector<int> ans;m…

【iOS】NSOperation、NSOperationQueue

文章目录 前言一、NSOperation、NSOperationQueue 简介二、NSOperation、NSOperationQueue 操作和操作队列三、NSOperation四、NSOperationQueue五、NSOperationQueue 控制串行执行、并发执行六、 NSOperation 操作依赖七、NSOperation 优先级八、NSOperation、NSOperationQueu…

一个JDBC小工具

pom.xml 结构 <properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><mysql5>5.1.44<…

服务器端优化-Redis内存划分和内存配置

6、服务器端优化-Redis内存划分和内存配置 当Redis内存不足时&#xff0c;可能导致Key频繁被删除、响应时间变长、QPS不稳定等问题。当内存使用率达到90%以上时就需要我们警惕&#xff0c;并快速定位到内存占用的原因。 有关碎片问题分析 Redis底层分配并不是这个key有多大&…

[信息收集]-端口扫描--Nmap

端口号 端口号的概念属于计算机网络的传输层&#xff0c;标识这些不同的应用程序和服务而存在的。通过使用不同的端口号&#xff0c;传输层可以将接收到的数据包准确地传递给目标应用程序。 80&#xff1a;HTTP&#xff08;超文本传输协议&#xff09;用于Web浏览器访问网页 …

jvm面试题30问

什么是JVM的跨平台&#xff1f; 什么是JVM的语言无关性&#xff1f; 什么是JVM的解释执行 什么是JIT? JIT&#xff1a;在Java编程语言和环境中&#xff0c;即时编译器&#xff08;JIT compiler&#xff0c;just-in-time compiler&#xff09;是一个把Java的字节码&#xff08;…

Fireworks AI和MongoDB:依托您的数据,借助优质模型,助力您开发高速AI应用

我们欣然宣布 MongoDB与 Fireworks AI 正携手合作 让客户能够利用生成式人工智能 (AI) 更快速、更高效、更安全地开展创新活动 Fireworks AI由 Meta旗下 PyTorch团队的行业资深人士于 2022 年底创立&#xff0c;他们在团队中主要负责优化性能、提升开发者体验以及大规模运…

Ubuntu22.04有线网络连接但是没网,网络图标显示问号

Ubuntu22.04有线网络连接但是没网&#xff0c;网络图标显示问号 问题描述解决方案 问题描述 有线网络连接 但是没网 且网络图标显示问号 解决方案 进入设置->隐私->在 连接情况 中关闭连接检查 关闭后 网络正常

vue 时间轴页面 自己的写法 欢迎交流指正

<div class"first-box"><!--贯穿线--><div class"vertical-line-wrap"><div class"vertical-line"></div><div class"vertical-line-arrow"></div></div><!--开始--><div c…

用于图生成的自回归扩散模型 笔记

1 Title Autoregressive Diffusion Model for Graph Generation&#xff08;Lingkai Kong、Jiaming Cui、Haotian Sun、Yuchen Zhuang、B. Aditya Prakash、Chao Zhang&#xff09;【PMLR 2022】 2 Conclusion This study propose an autoregressive diffusion model …

iOS ------ JSONModel源码

一&#xff0c;JSONModel的基本使用 1&#xff0c;基本使用方法 - (instancetype)initWithDictionary:(NSDictionary *)dict error:(NSError **)err; - (instancetype)initWithData:(NSData *)data error:(NSError **)error; - (instancetype)initWithString:(NSString *)str…

Python深度学习基于Tensorflow(3)Tensorflow 构建模型

文章目录 数据导入和数据可视化数据集制作以及预处理模型结构低阶 API 构建模型中阶 API 构建模型高阶 API 构建模型保存和导入模型 这里以实际项目CIFAR-10为例&#xff0c;分别使用低阶&#xff0c;中阶&#xff0c;高阶 API 搭建模型。 这里以CIFAR-10为数据集&#xff0c;C…

9.4.k8s的控制器资源(job控制器,cronjob控制器)

目录 一、job控制器 二、cronjob控制器 一、job控制器 job控制器就是一次性任务的pod控制器&#xff0c;pod完成作业后不会重启&#xff0c;其重启策略是&#xff1a;Never&#xff1b; 简单案例 启动一个pod&#xff0c;执行完成一个事件&#xff0c;然后pod关闭&#xff1b;…