问题缘由:微信小程序的输入框出现“左移”问题通常与键盘弹起时页面的布局或样式处理不当有关。这种问题可能是因为输入框或页面容器没有正确处理键盘弹起和收起时的变化,导致输入框出现偏移或页面错乱。
解决方案: 输入框位于视图之外时,滚动页面。
示例代码
<input type="text"
bindfocus="onFocus" bindblur="onBlur"
placeholder="请输入账号"
bindinput="bindInEmail" class="input"/>
// bindfocus和bindblur请查看微信开发文档
data: {
inputFocused: false,
},
onFocus() {
// 输入框聚焦时,检查并调整页面滚动
this.setData({ inputFocused: true });
// 获取输入框位置 类名(写自己的别写错)
wx.createSelectorQuery().select('.input').boundingClientRect(rect => {
if (rect.top < 0) {
// 输入框位于视图之外时,滚动页面
wx.pageScrollTo({
scrollTop: rect.top + 50, // 适当的滚动距离
duration: 300
});
}
}).exec();
},
onBlur() {
// 输入框失去焦点时,恢复页面布局
this.setData({ inputFocused: false });
},
完结