##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)