微信小程序键盘弹起后页面上推问题
微信小程序键盘弹起后页面上推问题
- 小程序的 input 组件聚焦后弹起键盘,自动通过页面上移的方式将输入框所在位置定位到键盘上方。
如果输入框本身就位于页面顶端,则不会造成上推。 - 但是,如果输入框是位于页面底端,有时候我们只希望输入框定位到键盘上方,而页面其他元素不动。
如图造成上推问题
解决方案:
- 将input的adjust-position属性设置为false,即不上推页面。
- 在inputfocus()函数中,监听键盘高度,给input组件添加一个向下padding-bottom同键盘高度一致。
- 在inputblur()函数中,恢复input组件的相对位置
附上代码
最后总结
通过关闭输入框聚焦后的页面上推,获取键盘高度给输入框定位位置来实现的。
微信小程序键盘弹起后页面上推问题相关推荐
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...
- 微信小程序 不能跳转页面 跳转不生效
微信小程序 不能跳转页面 跳转不生效 ,可能是用法不正确哦 wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx ...
- 微信小程序web-view 外部引用h5页面调用摄像头录制视频 配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频 配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
- 微信小程序PHP注册,微信小程序 教程之注册页面
微信小程序――Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性 类型 描述 data Objec ...
- 小程序上传音频失败_微信小程序实现录音后上传文件方法详细
本篇文章讲述了微信小程序实现录音后上传文件方法,大家对微信小程序实现录音后上传文件方法不了解的话或者对微信小程序实现录音后上传文件方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 ...
- 微信小程序学习6:页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数 文章目录 微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
- 微信小程序的订单评论页面-仿淘宝
微信小程序的订单评论页面-仿淘宝 在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以 先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...
- 【微信小程序】微信小程序跳转H5页面的实现思路与方案
需求简述 当前项目的主流程采用H5的方式编写. 在一些渠道的营销推广活动中,并不能直接跳转到网页,但可以跳转到微信小程序. 于是希望通过微信小程序,间接实现跳转H5页面的需求. 方法简述 有两种解决方 ...
- 微信小程序服务器支付sdk,微信小程序之支付后如何调用SDK的异步通知
微信小程序之支付后如何调用SDK的异步通知 发布时间:2021-07-05 10:47:33 来源:亿速云 阅读:57 作者:小新 这篇文章主要介绍微信小程序之支付后如何调用SDK的异步通知,文中介绍 ...
最新文章
- 项目管理难,如何高效地对项目进行管理?
- SP4062电路接口芯片保护IC
- abstract不能和哪些关键字共存 学习
- 技术向:一文读懂卷积神经网络CNN
- linux查看所有磁盘信息fdisk,Linux下添加新硬盘,分区及挂载 挂载好新硬盘后输入fdisk -l命令看当前磁盘信息 可以看...
- POJ 3670 Eating Together
- 剑指offer之java缓存总结,从单机缓存到分布式缓存架构
- 一生只有一个配偶的动物,如果一方死亡了,另一方会怎么办?
- 一线互联网大厂中高级Java面试真题收录!面试必会
- vivado 设计约束学习笔记1
- codevs 1388 砍树
- Java 11 的新特性(上)
- springboot+Vue在线考试系统
- Sonar插件的安装与使用详解
- nginx源码下载、编译和安装
- 通用的流氓软件手动清理方法
- 超分算法之SRCNN
- VueH5页面跳转高德地图导航
- c语言实现http下载功能
- FFMPEG学习【ffmpeg工具】
热门文章
- 有计算机考试励志的文案,抖音冲刺高考励志文案
- 题目描述请参照本章例题,编写一个程序,输出以下信息:************************** Very Good**********************
- 5G WiFi的信号难题:穿墙性能太差
- git下载,上传代码到GitLab ; Untracked files (use “git add <file>...“ to include in what will be committed)
- ISAM、MyISAM、InnoDB、ACID详解
- 不小心点了计算机一键还原怎么操作,电脑按了一键还原系统怎么办
- 我的2013年终总结
- centos7下mysql忘记密码并修改
- centos配置启动项_Centos 配置开机启动项
- WL算法(来自graph-bert)