问题
在较长的表单中,页面可能需要滑动,比如使用scroll-view标签, 在这种情况下,在苹果手机上使用Input显示正常,但是在安卓手机上就会出现输入内容上移错位的问题,严重影响使用
解决办法
需要设置一个状态控制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
})
}
对比结果
解决前
解决后
最后 🙌
好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞👍哦,阿门~