小程序安卓系统下Input输入内容上移错位问题的解决办法

问题

在较长的表单中，页面可能需要滑动，比如使用scroll-view标签， 在这种情况下，在苹果手机上使用Input显示正常，但是在安卓手机上就会出现输入内容上移错位的问题,严重影响使用

正常情况 BUG情况

解决办法

需要设置一个状态控制scroll-view是否允许滑动，当Input获取焦点是，将滑动禁止，当Input失去焦点时，允许滑动，废话多不多，上代码

wxml

<scroll-view scroll-y="{{isScroll}}" scroll-into-view="{{intoView}}"  scroll-with-animation="true" style="height: 100vh;">
    <input confirm-type="done"  type="digit"  bindfocus="bindfocus" bindblur="closeblur"  />
</scroll-view>

js

// 获取焦点事件
bindfocus(e){
    this.setData({  
      isScroll:false
    })      
},
// 失去焦点事件
closeblur(e) {
    this.setData({
      isScroll:true
    })
}

对比结果

解决前

解决前

解决后

解决后

最后 🙌

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~