微信小程序(原生) ios系统点击输入框页面出先左移

问题缘由:微信小程序的输入框出现“左移”问题通常与键盘弹起时页面的布局或样式处理不当有关。这种问题可能是因为输入框或页面容器没有正确处理键盘弹起和收起时的变化,导致输入框出现偏移或页面错乱。

解决方案: 输入框位于视图之外时,滚动页面。
示例代码

<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 });
  },

完结

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值