微信小程序要点记录

弹出框贴合手机键盘

需求

点击页面按钮时弹出悬浮输入框,输入框底部位置贴合在手机键盘顶部。

问题

由于无法获取手机键盘高度及手机键盘顶部到页面顶部的距离,所以用高度计算的方式无法定位弹出框的定位位置。
错误的实现方式:

实现


官方文档中指出了 cursor-spacing 属性的作用,可以试上一试。

1
2
//cursor-spacing
指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

关键技术点

修改弹出框的样式定位:

1
2
position:absolute;
bottom: 0;

为弹出框内的 input 或者 textarea 添加 cursor-spacing 属性,类型为 number,单位是 px,具体数字根据弹出框的高度来决定,官方文档中已有说明。

结果


完美达到预期。

video 组件层级无法修改的问题


官方文档中已经明确说明了这个问题,当页面中有自定义的悬浮按钮或者是底部固定栏,滚动页面就会出现 video 组件穿插覆盖到了最顶层的问题。
如果想避免出现这种问题可通过使用 cover-view 视图容器来规避。

1
2
//cover-view
覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera,只支持嵌套cover-view、cover-image。

注意:cover-view 内外都只支持嵌套 cover-view、cover-image两个标签。所以如果原本想用 button 按钮直接 auto-share 时只能改为在 js 中配置分享,同样如果原本想用 navigator 导航时也就只能在 js 中指定导航了。