uniapp文本框上下滚动问题

news/2024/12/22 13:21:51/

一个基本需求,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.ppmy.cn/news/1455936.html

相关文章

IP路由:构建高效网络的基石

目录 前言 一. IP数据报交付 二. IP路由 1.IP路由器 2.IP路由表 3.特定主机路由与默认路由 4.路由解析 5.路由选择过程 三. 路由协议 1.静态路由与动态路由 2.内部网关协议与外部网关协议 3.距离向量路由协议和链路状态路由协议 四. RIP协议 1.概述 2.工作原理 3.报文格式 …

vue2中的 <keep-alive>

在 Vue 2 中&#xff0c;给组件加上 name 属性本身并不直接实现切换路由时保存数据的功能。然而&#xff0c;name 属性在 Vue 组件中确实有一些用途&#xff0c;特别是在与 <keep-alive> 组件和 Vue 开发者工具&#xff08;vue-devtools&#xff09;一起使用时。 关于路…

X 推出 Stories 功能,由 Grok AI 生成新闻摘要

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

深度学习学习日记(5.6)

在 ViT&#xff08;Vision Transformer&#xff09;模型中&#xff0c;输入图像被分割成固定大小的图块&#xff0c;然后通过一个线性变换&#xff08;通常是一个卷积层&#xff09;来将每个图块投影到一个较低维度的特征空间。这些投影后的图块被视为序列&#xff0c;然后输入…

浅析扩散模型与图像生成【应用篇】(二十一)——DALLE·2

21. Hierarchical Text-Conditional Image Generation with CLIP Latents 该文提出一种基于层级式扩散模型的由文本生成图像的方法&#xff0c;也就是大名鼎鼎的DALLE2。在DALLE2之前呢&#xff0c;OpenAI团队已经推出了DALLE和GLIDE两个文生图模型了&#xff0c;其中DALLE是基…

Qt | QLCDNumber 类(LCD 数字),LCD 表示液晶显示屏

01、上节回顾 Qt 基础教程合集02、QLCDNumber 1、QLCDNumber 类用于显示类似于 LCD 显示屏上的字符(见右图) ​ 2、QLCDNumber 类是 QFrame 类的直接子类,因此 QLCDNumber 以使用从 QFrame 类继承而来的边框效果 3、QLCDNumber 可显示的符号有:0,1,2,3,4,5,6,7,8,…

消息队列使用常见问题

一、消息丢失的时机&#xff1f; 生产端消息丢失 问题&#xff1a;因为网络异常导致消息发送失败&#xff0c;此时可能会产生消息丢失的情况&#xff0c;重试后可能产生消息重复生产的情况。 解决&#xff1a;超时重试&#xff0c;并在消费端保证幂等性。 消息队列中消息丢失 …

【图书推荐】《图神经网络基础、模型与应用实战》

本书目的 详解PyTorch 图神经网络基础理论、模型与十多个应用案例&#xff0c;带领读者掌握图神经网络在自然语言处理、计算机视觉、推荐系统、社交网络4个领域的应用开发方法&#xff0c;丰富读者利用深度学习算法解决实际问题的能力。 本书案例 图卷积网络实现图注意力网络…