【微信小程序】安卓兼容问题，scroll-view上拉导致input输入框上移

最新推荐文章于 2025-02-14 14:06:22 发布

krico233

最新推荐文章于 2025-02-14 14:06:22 发布

阅读量1.3k

点赞数 6

分类专栏：日常踩坑文章标签： 1024程序员节

本文链接：https://blog.csdn.net/krico233/article/details/127491690

版权

日常踩坑专栏收录该内容

3 篇文章

订阅专栏

当一个scroll-view占据全屏高度(100vh)并包含input表单时，输入框聚焦会导致光标上移但输入框本身位置不变。此问题源于高度计算错误。解决方案包括避免给scroll-view设定整屏高度或使用height: calc(100vh - 1px)来防止bug的发生。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在一个超一屏的scroll-view标签中的input表单聚焦的时候，输入光标会随着键盘弹出导致向上偏移，但是输入框的本体(背景色，边框)还是留在原位置
bug如图所示

问题原因

原因大概率是由于给scroll-view设置了整屏高度(100vh)，导致在输入框聚焦时，上移高度计算出现问题，猜测底层对scroll-view里面input焦点定位时只计算了固定高度的值。

解决方案

只要不给scroll-view设置整屏高度，就可以避免这个bug，或者使用height: calc(100vh - 1px);也可以避免这个问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

krico233

关注关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【愚公系列】《微信小程序开发解析》005-事件

时光隧道

07-10

6万+

在微信小程序中，事件是用户和程序之间交互的核心概念。通过事件，用户可以与小程序进行各种交互操作，例如点击按钮、输入文字、滑动屏幕等。以下是微信小程序中事件的概念和使用方法。事件类型触摸事件：包括触摸开始、触摸移动、触摸结束等，如touchstarttouchmovetouchend等。鼠标事件：主要用于 PC 端小程序，如clickdblclick等。表单事件：与表单控件相关的事件，如submitinputfocusblur等。媒体事件：与音视频控件相关的事件，如playpauseended等。

react-native-input-scroll-view：完美的TextInput ScrollView

02-05

react-native-input-scroll-view 主要实现以下功能：当键盘弹出时， TextInput将自动调整到键盘顶部。当键盘弹出时， ScrollView的内容不会被键盘遮挡。当多行TextInput获得焦点时，所选光标将自动调整到键盘顶部。当多行TextInput创建新行时，新行将自动调整到键盘顶部。将手指放在TextInput顶部，然后滑动ScrollView ，当您抬起手指时， TextInput将不会获得焦点。安装 npm $ npm install react-native-input-scroll-view --save 纱 $ yar

2 条评论您还未登录，请先登录后发表或查看评论

小程序 input键盘弹出时，滚动页面，输入框内容错位问题

lgh_ss的博客

05-28

3764

在ios9.+的版本上，遇到了一个问题。在键盘弹出的时候，快速滚动页面，输入的内容或input提示语会错位。且有时无法恢复到原有位置。当然，前提是你这个页面是超过一屏需要滚动的时候解决办法： 1 页面可通过样式的滚动（overflow-y: auto）来写，但是不要用 -webkit-overflow-scrolling: touch; 2页面用scroll-view,通过变量{sysScroll}来控制 view: <scroll-view scroll-y="{{sysScroll}}"

小程序scroll-view里套input框会导致输入内容浮动

最新发布

weixin_41334434的博客

02-14

132

可以把scroll-view的高度设置成100vh - 1px。

# 解决安卓机器上，input输入元素随键盘的打开漂移

qq_45663927的博客

08-17

334

通过将页面元素整体放在滚动视图中，并给滚动视图设置固定高度，我们可以有效地解决安卓机器上input输入元素随键盘打开漂移的问题。这种方法可以提供更流畅的用户体验，并减少潜在的布局问题。

【scroll-view滑动条】遮挡内容解决方法，【输入框】输入内容顶起页面解决方法，【文本超出隐藏】

weixin_44899940的博客

06-29

1484

【scroll-view滑动条】遮挡内容解决方法，【输入框】输入内容顶起页面解决方法，【文本超出隐藏】

微信小程序（九）scroll-view组件详细介绍

09-01

**微信小程序scroll-view组件详解** 在微信小程序开发中，`scroll-view`组件是一个非常重要的组件，它用于实现页面的滚动效果，支持水平和垂直滚动。本文将深入介绍`scroll-view`组件的特性和使用方法。 ### 一、...

微信小程序联动输入框与scroll-view样式问题解码

在SF问答精选《二》中，讨论的主题主要围绕微信小程序中的输入框联动和第三方库（如Swiper）样式修改，以及scroll-view组件的样式设置问题。第一个问题涉及到了如何实现在一个输入框（例如input1）输入内容时，...

微信小程序实践教程：scroll-view实现加载更多与搜索框固定功能

资源摘要信息: "微信小程序学习用demo：scroll-view 加载更多搜索框固定" 知识点一：微信小程序概述 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜索一下即可...

微信小程序 ---- 组件应用和实际开发的DEMO

01-09

例如，DEMO可能演示了如何创建一个用户登录模块，包括输入框（input）、按钮（button）的交互，以及网络请求（调用微信小程序的API进行登录验证）。 7. **调试与发布**：开发过程中，微信开发者工具提供了强大的...

当滚动列表的时候，让input框失去焦点（移动端会收起键盘）

weixin_33834910的博客

08-14

2640

1.拓展scroll.vue事件 1 beforeScroll:{ 2 type:Boolean, 3 default:false 4 } 5 6 7 if(this.beforeScroll){//滚动列表的时候收起键盘（移动端） 8 this.scroll.on('beforeScrol...

Android 输入框输入字的时候，键盘出来，输入框上移

临海听风の世界的博客

08-09

3334

好久没更新了，最近忙于项目，做朋友圈的时候遇到输入框输入字的时候，键盘出来，输入框上移，这个问题困惑了我很久，后来终于解决了，当然有很多解决方案，在这里说说我的解决方案：调用系统的InputMethodManager这个类，当输入框为空的时候，输入框可见，并且有焦点，然后调用InputMethodUtils.showInputMethod(mInputBox);这个方法。如果你想要点击输入框外部让...

android：输入框时局部上移

Rssqzqyp的博客

08-08

986

一、我遇到的情况是登录界面，在我输入用户名时下面的输入框被遮挡。很影响美观，于是我就在看很多ap上在你输入时整个界面是不会被遮挡的，我看了其他博主的解决过程后我的也不存在遮挡问题了。方法三：把顶级的layout替换成ScrollView，或者说在顶级的Layout上面再加一层ScrollView的封装。这样就会把软键盘和输入框一起滚动了，软键盘会一直处于底部。，这样会让屏幕整体上移。如果加上的是 android:windowSoftInputMode="adjustPan"这样键盘就会覆盖屏幕。

android listview和scrollView兼容的一种方法

zy4569575的博客

06-22

606

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST); super.o

微信小程序在使用scroll-view后，input聚焦时，键盘弹出后无法看到内容

weixin_38103152的博客

11-03

1249

微信小程序在使用scroll-view后，键盘弹出后无法看到内容，测试后发现，真实的输入框随键盘上移了所以看不到键盘，并且聚焦时如果input不使用adjust-position="{{false}}"，会跑到页面顶部，解决方案：在js中使用onPageScroll来代替scroll-view监听页面滚动 onPageScroll：官网文档并没有更新，但是在更新内容中可以看到 https://developers.weixin.qq.com/miniprogram/dev/framewor.

解决微信小程序input滑动时内容上移

qq_43076278的博客

07-15

1701

在输入框获取焦点的时候给其加个view包住，属性catchtouchmove设置不可滑动。既然在边缘滑动就会有问题那就动态设置是否可以滑动获取焦点不可滑动失去焦点可滑动。在input框获取焦点的时候，上下滑动会使其文字悬浮。......

微信小程序安卓系统下Input输入内容上移错位问题的解决办法

weixin_61769998的博客

01-18

1805

微信小程序安卓系统下Input输入内容上移错位问题的解决办法

小程序采用Scroll-view实现瞄点，不兼容input标签解决方法

weixin_40463469的博客

05-07

895

小程序采用Scroll-view实现瞄点，不兼容input标签解决方法 1、原来采用的方法上述为了测试scroll-view与input在安卓端不兼容，实验测试确实是不兼容。 2、采用scroll-view实现瞄点的方法 <scroll-view style="height:100%" scroll-into-view="{{toView}}" scroll-y="true" scro...