【warning】
本文为实际工作简记，粗陋小笔记一篇，仅供参考。
一、问题简述
小程序填写表单的过程中，手机键盘调起，默认情况，键盘顶部会紧贴着表单项。
如图所示：
当遇到这样的场景：
表单项输入的内容，作为关键字，向后台请求匹配数据列表。拿到数据后，在表单项下方展示列表数据，供用户点选。
就会出现问题：
展示在 input 下面的列表，会被键盘完全挡住。
二、解决办法
1、获取焦点时，使用 input 组件的 cursor-spacing 属性，设置键盘和 input 组件的间距。
2、失去焦点时，计算页面已经向上滚动的距离，加上列表项的高度，手动将整个页面向上推，防止处于页面底部的 input 失去焦点时、又掉回页面底部。影响用户体验。
手动将整个页面向上推的方式：
wx.pageScrollTo({
scrollTop: 100 // 设置为，用户手动滚动了的高度 + 列表项高度。要动态计算
})
【注意】
wx.pageScrollTo 仅在 page 组件中有效，component 中无效！
三、记录解题思路
1、在当前 input 获取焦点的时候，手动将页面向上、滚动 列表高度 那么大的距离。
2、如何滚动？👇
（1）pageScrollTo 方法
wx.pageScrollTo({
scrollTop: 100 // 设置为，用户手动滚动了的高度 + 列表项高度。要动态计算
})
（2）使用 scroll-view
将整个表单项使用 scroll-view 包裹，给定高度为手机屏幕高度。
当 input 获取焦点，使用 scroll-view 组件的 api，在当前已经滚动了的距离基础上（当然也可能并没有滚动）、将整个容器再向上滚动列表项的高度。
（这个方式我没有成功。。）
网友评论