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,一经查实,立即删除!

相关文章

秋招后端开发面试题 - JVM类加载机制

目录 JVM类加载机制前言面试题能说一下类的生命周期吗&#xff1f;类加载的过程知道吗&#xff1f;类加载器有哪些&#xff1f;什么是双亲委派机制&#xff1f;为什么要用双亲委派机制&#xff1f;如何破坏双亲委派机制&#xff1f;如何判断一个类是无用的类&#xff1f; JVM类…

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

高精地图是怎么构建的&#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;缺乏信任 心理暗示…

Web前端开发之CSS_3

CSS3 新特性动画媒体查询雪碧图字体图标 1. CSS3 新特性 1.1 圆角 使用CSS3 border-radius 属性&#xff0c;可以给任何元素制作“圆角”。border-radius属性&#xff0c;可以使用以下规则&#xff1a; 四个值&#xff1a;依次为左上角、右上角、右下角和左下角&#xff08;…

牛客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…

Java并发代码入门

Java并发代码入门 1. 第一个线程2. Java创建线程的5种方式3. 多线程优势代码4. 线程的属性5. 中断线程1. 使用自定义的变量来作为标志位2. Thread.interrupted() 或者Thread.currentThread().isInterrupted() 代替自定义标志位 6. join2.5 等待一个线程-join()A中调用B.join表示…

【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浏览器访问网页 …

淘宝商家联系方式获取工具解析 淘宝商家采集工具分享

淘宝商家联系方式获取工具是一种用于获取淘宝商家联系方式的软件工具。它可以帮助用户从淘宝网上采集商家的联系方式&#xff0c;如店铺名称、联系人姓名、电话号码、微信号等。 这种工具的原理通常是通过模拟用户在淘宝搜索商家和访问商家店铺的行为&#xff0c;然后从店铺页…

【信息系统项目管理师练习题】资源管理

马斯洛需求层次理论中,下列哪种需求属于最高层次的需求? A) 生理需求 B) 安全需求 C) 社会交往的需求 D) 自我实现的需求 答案:D) 自我实现的需求 根据赫兹伯格双因素理论,下列关于激励因素和保健因素的说法正确的是: A) 激励因素能够消除工作中的不满意,保健因素…

jvm面试题30问

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

【挑战30天首通《谷粒商城》】-【第一天】02、简介-项目整体效果展示

文章目录 课程介绍 ( 本章了解即可&#xff0c;可以略过)一、 分布式基础 (全栈开发篇) (初中级)二、 分布式高级 (微服务架构篇) ( 高级)三、高可用集群 (架构师提升篇)( 架构 ) one more thing 课程介绍 ( 本章了解即可&#xff0c;可以略过) 1.分布式基础(全栈开发篇)2.分布…

git merge 命令合并指定分支到当前分支

git merge 是一个用于合并两个分支的 Git 命令。当你在不同的分支上工作时&#xff0c;可能会有一些不同的更改。使用 git merge 可以将这些更改合并到一起。以下是一些常见的 git merge 用法示例&#xff1a; 1. 合并当前分支与另一个分支的更改 git merge <branch-name&…