在挪动端里, 当输入框处于页面比较下方的时刻回发作键盘掩盖输入框的状况, 在小顺序中也发作了相似状况, 但小顺序供应了一些api, 但不能到达需求. 这里来简单说一下处置惩罚思绪.
小顺序的默许行动
在发作了键盘掩盖输入框的时刻, 在不操纵任何api的状况下, 小顺序会把屏幕向上推, 推到输入框正好在键盘上方的位置.
也就是假如不经由处置惩罚, 小顺序的键盘是不会掩盖输入框的. 但是在我的需求里如许还不够, 由于页面上部份是须要延续展现的内容, 不愿望把页面向上推.
所以下面要通太小顺序的api来处置惩罚这些题目.
cursor-spacing
在比较一般的UI设想中, 输入框表面现实都邑有一层wrapper, 而很明显小顺序是默许行动是不晓得的, 所以结果是会把这层wrapper的下半部份(输入框以下的)切掉. 那末就异常难看了.
引入这个apicursor-spacing, 设若干, input下面就留若干. 这个数字应当是’输入框下边沿到wrapper完毕的间隔”.
小顺序的坑在于: 文档上的单元是错的, 原本就须要试才晓得这个属性的寄义是什么, 所以单元错致使无结果就让一(大)部份人摒弃了. 准确的单元是带有单元的字符串. 比方10px或许100rpx.
adjust-position
适才说到我的需求, 我愿望页面不向上推, 而直接把输入框顶上来.
因而尝试了这个api. 默许是true, 把他设为false. 结果变成了: 点了输入框, 键盘圆满掩盖输入框.
因而在加上cursor-spacing, 发明这两个api是不能同时见效的.
所以末了结论是: 纯真用供应的api没法完成需求了. 所以只能监听事宜本身做.
处置惩罚方案
手动操纵输入框思绪:
- adjust-position设为false.
- 在输入框的wrapper的bottom款式绑到当地数据, 并设为absolute定位.
- 在focus事宜里转变输入框的位置.
- 在blur事宜里回复输入框的位置.
依据这个思绪操纵, 遇到了几个题目:
怎样肯定输入框的位置
发明在bindfocus事宜中能够取得键盘的高度, 经由尝试, 键盘的高度是以px为单元的. 所以直接把bottom的值设为px高度就好了.
假如输入框wrapper的相对定位不是页面底部, 状况就比较复杂, 如果用rpx为单元, 须要取得屏幕宽高来盘算px数, 在不贫苦的状况下能够调整布局使wrapper相对于页面底部定位.
在转变style后输入框马上落空核心
发作了这个状况后表现为: 点了输入框, 输入框的wrapper闪一下又回原处. (由于落空核心)
经由屡次实验, 须要做的是在绑定一个当地变量到focus属性.
然后用wx:if依据是不是focus隐蔽输入框, 放一个假的输入框, 点击今后使转变focus属性来唤起键盘.
贴一份完成的代码.
