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

最新推荐文章于 2024-01-12 09:29:53 发布
最新推荐文章于 2024-01-12 09:29:53 发布
阅读量1k 收藏
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38103152/article/details/109466751
版权

微信小程序在使用scroll-view后，键盘弹出后无法看到内容，测试后发现，真实的输入框随键盘上移了所以看不到键盘，

并且聚焦时如果input不使用adjust-position="{{false}}"，会跑到页面顶部，

解决方案：在js中使用onPageScroll来代替scroll-view监听页面滚动

 

onPageScroll：官网文档并没有更新，但是在更新内容中可以看到

https://developers.weixin.qq.com/miniprogram/dev/framework/release/v1.html#v1.4.0%20(2017.07.10)

onPageScroll(e){
  this.scroll(e.scrollTop)
},

木雨痕
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序（九）scroll-view组件详细介绍
09-01
**微信小程序scroll-view组件详解** 在微信小程序开发中，`scroll-view`组件是一个非常重要的组件，它用于实现页面的滚动效果，支持水平和垂直滚动。本文将深入介绍`scroll-view`组件的特性和使用方法。 ### 一、...
微信小程序学习用demo：scroll-view 加载更多 搜索框固定
03-15
在这个“微信小程序学习用demo：scroll-view 加载更多 搜索框固定”中，我们可以看到几个关键知识点，包括`scroll-view`组件的使用、加载更多（Loadmore）功能的实现以及搜索框的固定布局。 首先，`scroll-view`是...
微信小程序scroll-view底部内容无法完全显示
呆子小木心的博客
06-11 3749
微信小程序scroll-view底部内容无法完全显示 真机调试时，滑动到最底部，松手无法显示最底部的内容，如图： 需要在scroll-view组件内的最后加一个空白组件view在占位，使最后的信息能够完全显示出来 <view class="scrollSpase"></view> ...
微信小程序之解决键盘与页面scroll-view问题
weixin_43652106的博客
08-17 3145
场景介绍： 在编写小程序类似微信聊天页面时，常常遇到这样情况： a/ 键盘弹出或收起时，聊天消息没有自动滚到最底部。 b/点击输入框弹出软键盘后，遮盖部分聊天内容。 解决方式： 一，解决问题a 将聊天页面的所有msg都编号如：msg-0，msg-1，msg-2… 直接锁定最后一条msg，滚动到那里即可。 步骤： 1，在scroll-view标签中添加：scroll-into-vi...
微信小程序----键盘弹出挡住输入框问题解决方案
weixin_46561899的博客
01-12 1999
问题：微信小程序聊天输入框点击后，键盘弹出挡住输入框。2、给发送消息的盒子一个bottom。为监听到的键盘的高度。
解决在小程序/H5上点击输入框键盘弹起后弹框显示不全问题@令狐张豪
LingHuzh的博客
07-11 1597
要实现的效果图： 解决思路： end~~~如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！ 文章对您有所帮助请给作者点个赞支持下，谢谢~......
微信小程序 video在scroll-view中会脱离文档流
qq_36904182的博客
08-06 701
使用view包裹video，加上id
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
微信小程序源码-dingzhilianWeChat-master.zip
最新发布
03-07
4. **组件化开发**：微信小程序提供了丰富的内置组件，如视图容器（view、scroll-view）、基础内容（text、image）、表单组件（input、button）等，通过组件可以快速构建界面。 5. **API接口**：微信小程序提供了...
微信小程序（二十二）action-sheet组件详细介绍
09-01
在微信小程序中，Action-Sheet通常用于在底部弹出一个包含多个操作的列表，用户点击后执行相应的操作，而取消按钮则用于关闭Action-Sheet。 Action-Sheet组件的基本结构包括两个子组件：`action-sheet-item` 和 `...
微信小程序使用scroll-view时，弹出的键盘会和底部input框重叠问题
superYe7的博客
04-16 818
<scroll-view style="height: calc(100vh - 340rpx);margin-bottom: 20rpx;background: #f8f8f8" scroll-y="true"> ... <u-keyboard ref="uKeyboard" mode="number" v-model="show" :dot-enabled="false" @change="valChange" @backspace="backspace"&...
scrollView 微信小程序 scroll-view 去掉滚动条 隐藏滚动条 解决方案 解决方法
SupperPigger的博客
05-30 5124
微信小程序去掉scroll-view滚动条的方式 在微信小程序的项目开发中，时常有需要用到scroll-view的地方。 但是使用scroll-view就难免的会出现默认的滚动条，很影响页面的样式。 我在做项目的时候就遇到了这样的问题，然后去网上搜索，结果搜索出来很多都是说通过添加下方CSS来达到的。 ::-webkit-scrollbar { width: 0; height: 0;...
【微信小程序】安卓兼容问题，scroll-view上拉导致input输入框上移
krico233的博客
10-24 1046
安卓兼容问题，scroll-view上拉导致input输入框上移
小程序采用Scroll-view实现瞄点，不兼容input标签解决方法
weixin_40463469的博客
05-07 748
小程序采用Scroll-view实现瞄点，不兼容input标签解决方法 1、原来采用的方法 上述为了测试scroll-view与input在安卓端不兼容，实验测试确实是不兼容。 2、采用scroll-view实现瞄点的方法 <scroll-view style="height:100%" scroll-into-view="{{toView}}" scroll-y="true" scro...
微信小程序 input +下拉scroll-view
lxp997的博客
06-25 1396
效果图 点击输入框展示第一页的数据,输入框有数据筛选,点击输入框和下拉页以外的焦点输入框消失 项目地址:https://github.com/Aubrey-L/down-input/tree/master ...
ios 微信浏览器下 input失去焦点后 软键盘收起后 被撑起上移动的页面 没有归位
u013362969的博客
05-07 2035
在iOS微信浏览器下 input 获取焦点软键盘弹起把页面整体往上撑起了移动了一定距离， 失去焦点后 软键盘收起后 被撑起往上移动的页面没有归位，导致页面上的元素错位，点击按钮，input输入框等的位置发生错位。 解决办法两种： 1、当input失去焦点后，使用js将页面滚动到顶部。 //滚动到顶部 scrollToTop:function(){ ...
小程序 scroll-view 的滚动问题
hjy170314的博客
04-09 1596
由于我在两个页面在中同时使用同样的设置scroll-view ,得到的结果却是不一样的, 原因是一个页面是引用组件的方式引进内容的,另一个则在内容页面引用的scroll-view 样式和js的设置完全一致的情况下,我的组件引用的方式还是无法滚动,这让我很头疼,最后我只能在引用组件的那个 标签上加上最小高度,把内容撑开,此时,才能滚动,具体详细的问题我也不太清除. 下面是我的代码 &lt...
解决微信小程序开发者工具输入框焦点问题
aozhi7108的博客
07-28 1362
Windows10笔记本上运行微信小程序开发者工具，输入框（input，textarea）没有焦点，只能在真机调试，效率太低。后来发现是Window10对笔记本高分屏支持不好，要DPI缩放，导致兼容性问题。解决方法： 显示设置、缩放与布局改为100%。这样就可以点击输入框了，但是字体变得很小，最好是外接显示器。 不修改DPI缩放，长按输入框即可！ 转载于:https...
微信小程序在安卓机里input输入无显示，键盘点击完成，收起键盘才显示的原因
AMUSIQ的博客
07-26 5659
今天在小程序开发过程中遇到微信小程序在安卓机里input输入无显示，键盘点击完成，收起键盘才显示的情况，然而iphone显示正常。如下图。 图一：随机输入字母无显示 图二：点击键盘右下角完成后显示刚刚输入的文字 导致原因：input不能给它设置color:rgba样式，只要rgba的a&lt;1,立刻就变为透明了。所以为了将就一下安卓，input的文字还是不要设置成有透明度的颜色了。...
想在微信小程序中添加元素，需要使用小程序提供的什么组件和 API 来完成。
07-13
在微信小程序中添加元素，你需要使用小程序提供的组件和 API 来完成。以下是常用的组件和 API： 1. 视图容器组件：视图容器组件用于包裹和布局其他组件，常用的有 `view`、`scroll-view`、`swiper` 等。 2. 基础组件：基础组件用于显示文本、图片和按钮等内容，常用的有 `text`、`image`、`button` 等。 3. 表单组件：表单组件用于收集用户输入的数据，常用的有 `input`、`textarea`、`picker` 等。 4. 列表渲染：使用 `wx:for` 指令可以在模板中渲染列表，结合 `block` 标签可以实现动态添加元素。 5. 动画组件：动画组件用于添加动画效果，常用的有 `animation`、`wx.createAnimation`。 6. 小程序 API：小程序提供了丰富的 API，可以进行页面跳转、网络请求、本地存储等操作。可以根据具体需求使用相关 API 实现添加元素的功能。 使用这些组件和 API，你可以根据设计需求，在小程序页面中动态添加和展示元素。需要根据具体的场景和需求选择合适的组件和 API 进行使用。建议参考微信小程序官方文档和开发者工具提供的示例代码来学习和使用相关组件和 API。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值