在开发微信小程序的时候遇到，输入用户名或者手机号以及地址，手机键盘调起来，会把输入框遮挡。

如图：

以上两张图是自己工作中遇到的，此处不要着急，一个属性帮你搞定。

cursor-spacing：指定光标与键盘的距离，单位px或rpx，默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

微信小程序开发文档api:

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

最终呢，就解决输入框被遮挡问题喽！

源：

https://my.oschina.net/hp2017/blog/1819169?from=singlemessage&isappinstalled=0

微信小程序 - 弹出键盘遮挡住输入框的更多相关文章

  1. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  2. 微信小程序弹出层点击穿透问题

    问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...

  3. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  4. 微信小程序弹出可填写框两种方法

    方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...

  5. 微信小程序弹出层

    1.消息提示     wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.show ...

  6. 微信小程序弹出层动画特效

    .rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: sho ...

  7. 微信小程序弹出和隐藏遮罩层动画以及五星评分

    参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...

  8. 微信小程序 - 弹出层组件

    需要的可以下载示例:maskalert

  9. 微信小程序弹出框滚动穿透问题

    1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...

随机推荐

  1. Mac下包管理平台homebrew的使用

    一.安装 参考:http://www.cnblogs.com/EasonJim/p/6287098.html 二.使用 假设我要安装node,命令如下: 安装软件 brew install node ...

  2. LINQ入门教程之各种标准查询操作符（一）

    好久之前就想系统的学习下LINQ,好久之前…… 本篇文章主要介绍LINQ等的标准查询操作符,内容取自<LINQ高级编程>,后续还会介绍LINQ to XML ,LINQ to SQL. L ...

  3. Visual Studio 跨平台開發實戰(4) - Xamarin Android 基本控制項介紹 （转帖）

    前言 不同於iOS, Xamarin 在Visual Studio中針對Android, 可以直接設計使用者介面. 在本篇教學文章中, 筆者會針對Android的專案目錄結構以及基本控制項進行介紹, ...

  4. Java Service Wrapper简介与使用（转）

    本文转自https://www.cnblogs.com/zcy_soft/p/3738947.html,写的非常好,珍藏一下 1. wrapper的意思? wrapper在此处理解为“包装”. 2. ...

  5. LINUX 查找替换命令 总结

    find /var/ -name "*.php" > /home/tmp 在/var/目录下查找 所有以.php后缀结尾的文件  结果很多,就 > 输出结果到/home ...

  6. Jmeter创建FTP测试计划

    创建FTP测试计划 在这一章,你将学习如何创建一个基础的测试计划来测试FTP站点.你将在一个FTP站点上的两个文件中创建四个用户来发送请求.并且,你将告诉用户运行测试两次.所以,总的请求数是(4个用户 ...

  7. FocusBI:租房分析可视化（PowerBI网址体验）

    微信公众号:FocusBI关注可了解更多的商业智能.数据仓库.数据库开发.爬虫知识及沪深股市数据推送.问题或建议,请关注公众号发送消息留言;如果你觉得FocusBI对你有帮助,欢迎转发朋友圈或在文章末 ...

  8. Maven jdk.1.7

    settings.xml <profile> <id>jdk17</id> <activation>  <activeByDefault>t ...

  9. OpenStack 组成 架构

    Components of OpenStack OpenStack is on a mission: to provide scalable, elastic cloud computing for ...

  10. IntelliJ使用指南—— 导入Eclipse的Web项目

    通常一个团队中可能有人用eclipse,有人用intelliJ,那么经常会出现需要导入别人用eclipse建好的web项目.而IntelliJ提供了多种项目类型的导入方式,其中就有eclipse. 在 ...