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

如图：

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

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下使用PF进行端口转发和防火墙配置（类似Linux的iptables）

    在Mac没有iptables这些,替代的软件为PF,命令为pfctl.在早些版本用ipfw(<=10.10),后面改为PF.还有一些可以使用OpenBsd,不过这个不太好用. 网上关于pfctl ...

  2. mono for android 第四课--提示框(转)

    其实在VS中开发安卓代码和C#还是有一些相似性,刚开始我也不知道怎么弹出提示框,于是就百度了下,再加上个人的小聪明得到一下结果 builder.setTitle表示提示框的标题. setMessage ...

  3. 数学还勉强管用，用代码还能画个canvas 仪表盘(含完整代码)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Java集合类中的Iterator和ListIterator的区别

    注意:内容来自网络他人文章! 最近看到集合类,知道凡是实现了Collection接口的集合类,都有一个Iterator方法,用于返回一个实现了Iterator接口的对象,用于遍历集合:(Iterato ...

  5. linux安装使用xdebug

    我还是来给大家一个正确的配方,每个人的php版本不一样 所以下载的xdebug应该是不一样的 1,https://xdebug.org/wizard.php   进入这个网页 把自己phpinfo的信 ...

  6. android开发之提高应用启动速度_splash页面瞬间响应_避免APP启动闪白屏

    Application和Activity中的onCreate都进行了优化,基本没有耗时操作,但是启动应用之后还是会闪现一下白色背景,然后才进入Splash页面,对比了一下QQ.微信.微博等客户端,点击 ...

  7. Http的Get和Post--扫盲篇

    Http Get请求,根据Http规范Get用于服务器信息的获取,而且安全及幂等的.其中安全的在此处的含义是:不会对服务器数据造成修改.增加.以及数据状态的改变. Http Post请求,表示可能修改 ...

  8. 修复PHP支持的标准JSON数据格式

    PHP的json_decode无法解析的JSON数据,代码如下: $json = "{rst:5,c:[ [1018485,2,0,0,0,0,'','0-0','','',2,0,2],[ ...

  9. 《Think Python》第15章学习笔记

    目录 <Think Python>第15章学习笔记 15.1 程序员定义的类型(Programmer-defined types) 15.2 属性(Attributes) 15.3 矩形( ...

  10. 安装caffe(opencv3+anaconda3)

    目录 仅安装CPU版本的caffe 1.下载相关的依赖包: 2.安装opencv3 3.安装caffe 参考文献: 仅安装CPU版本的caffe 1.下载相关的依赖包: sudo apt-get in ...