bindsheet+键盘在页面跳转时的bug及处理思路##HarmonyOS 应用开发##

​

##HarmonyOS 应用开发##

最近做的一个项目中，有这样的一个需求

在A页面中，点击某一项目后，会弹出一个bindsheet，同时，会给TextInput组件自动加上焦点，目的是为了弹出输入框，图片如下：

当用户输入了金额数字后，点击“去计算”按钮，则通过router跳转到费用计算页面去显示计算结果。

我原先的代码顺序是，先跳转到新的页面，然后再通过修改控制bindsheet显示的变量的值为false来关闭这个bindsheet，我认为这样一来，对于bindsheet关闭的动画用户就是看不到的，因为已经跳转到了新页面，而关闭的动画是在跳转后，在原页面中去实现的。

然而，在真机调试的时候，我发现实际的效果是：

当点击“去计算”按钮时，整个bindsheet部分是先向上弹了一下，位移了一点点的距离（大概10vp左右），然后页面会停顿一下，再跳转到新页面

虽然说bindsheet关闭的动画的确是看不到了，但是这个向上弹跳并且停顿的效果，实际上是更加破坏了用户的使用体验

我猜测，这里面的问题可能是因为，现在的代码执行顺序相当于我把3个动画效果同时执行了，造成了冲突，这3个动画效果分别是：bindsheet关闭的动画效果、键盘缩回的动画效果和页面跳转到的动画效果。这里的键盘缩回的问题是我一开始没有考虑到的，因为在页面跳转的时候，相当于这个TextInput失去了焦点，自然弹出的键盘也会缩回。

那么相当于把这3个动画拆开来分别取执行应该就能解决这个问题了，基于这个思路，我的第一个修改方案是先跳转页面，等待0.1秒后再去收回bindsheet，但是仍然会有刚才的问题，进一步猜测，实际上可能是bindsheet收回的动画效果和页面跳转的动画效果产生了冲突

最后解决方案是：

先关闭bindsheet，然后等待0.1秒后再去跳转页面

实际测试的时候发现

bindsheet和键盘是同时缩下去的，然后再是页面跳转，整体的衔接非常紧凑，实际上表现出来的动画效果具有连贯性

这部分的代码如下：

this.formshow = false;
setTimeout(()=>{
page.go("Gongju_Susongfei_Jisuan",{anyou:this.leixing[this.chooseidx],num:this.formmon} as pgo)
this.formmon = "";
},100)

​