bindsheet+键盘在页面跳转时的bug及处理思路

上海张律师
• 阅读 3

​ ##HarmonyOS 应用开发##

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

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

bindsheet+键盘在页面跳转时的bug及处理思路

当用户输入了金额数字后,点击“去计算”按钮,则通过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)

点赞
收藏
评论区
推荐文章
九路 九路
2年前
RecycleView滚动定位不准确问题研究
开发当中经常会遇到的产品需求,recycleview自动滚动到某一个位置。具体场景可能是如下:页面初始化之后自动自动跳转到某一个位置页面滚动之后要回到某一个位置为了展示完全需要recycleview做微小的
Dax Dax
3年前
微信小程序不支持wx.getUserInfo授权的解决方法
微信小程序最近被吐槽最多的一个更改,就是用户使用wx.getUserInfo(开发和体验版)时不会弹出授权,正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮,然后再弹出授权。我最近围绕这个做了一些研究,来看看我是如何做好这个授权。1.用户进来一个页面时,按照微信小程序的生命周期,开始解析onLoad里面的内容。所以我们在第一步,就把代码放在这里
Wesley13 Wesley13
3年前
APP自动化测试,判断页面与预期是否相同
自动化测试中,有时需要验证页面跳转是否正常1、选择appium实现,因为要填写appPcakage和appActivity,只能验证一个单独的APP,在自身APP上各个页面是否跳转正常例如:焦点从APP中的【智能音箱】TAB移动到【历史】TAB后,可以通过try去判断“历史”页面是否存在应有的元素,若抛出异常说明跳转没有成功!(https:/
Wesley13 Wesley13
3年前
IOS开发
在SwiftUI中显示模态视图简介这里教大家如何弹出一个简单的模态视图。分别有两个页面,ContentView和GCPresentedView,以下对应简称为A和B。我们要做的是在A视图中点击按钮跳转到B视图,然后再从B视图点击按钮返回到A视图。步骤在A视图中创建按钮和模态视图代码
Wesley13 Wesley13
3年前
10分钟彻底搞懂单页面应用路由
上一次,跟大家科普了小程序的自定义路由routes,开启了路由之旅;今天,顺势就单页面应用路由,跟大家唠个五毛钱,如果唠得不好……退…一块钱?单页面应用特征假设:在一个web页面中,有1个按钮,点击可跳转到站内其他页面。多页面应用:点击按钮,会从新加载一个html资源,刷新整个页面;单页面应
Wesley13 Wesley13
3年前
DOM元素的自动隐藏
在一些有悬浮元素的场景中,比如点击一个按钮弹出菜单后,点击菜单以外的地方,菜单应该被隐藏起来。隐藏的方式最好是自动隐藏,或至少是组件内的自动隐藏。蒙层比如,一个模态框组件(闭包实现)点击蒙层时,响应蒙层的点击事件,可以在事件处理函数中隐藏整个组件。在Vue和React等框架的组件中,这一点非常容易实现。<divclass"com
鸿蒙小林 鸿蒙小林
12小时前
《仿盒马》app开发技术分享-- 订单详情页(32)
技术栈Appgalleryconnect开发准备在之前的章节中我们实现了订单的提交,以及提交之后跳转到确认订单页面,在确认订单页面我们添加了一个入口,这个入口是查询订单,当我们点击入口时,我们需要跳转到一个新的界面,这个界面通过接收上个界面的订单id或者订
IT全栈视野 IT全栈视野
10个月前
Vue3回车键实现 Tab 键功能
最近用vue做一个页面的tab功能,客户需要用回车换行。以下这段代码实现了在这3个文本输入框中,按下回车键时模拟Tab键的效果,将焦点切换到下一个输入框。languageimportreffrom"vue";constinput1ref("");const
taskbuilder taskbuilder
6个月前
创建学员信息添加页面
在TaskBuilder的项目资源管理器内,点击学员管理项目节点(xygl)里的“前端文件”子节点右侧的加号:会弹出如下所示的“添加前端资源”的对话框:在“资源名称”输入框内输入:add,然后在下面的资源类型列表里点击“数据添加TFP”按钮,然后点击“下一
taskbuilder taskbuilder
6个月前
创建学员信息修改页面
6、创建学员信息修改页面在TaskBuilder的项目资源管理器内,点击学员管理项目节点(xygl)里的“前端文件”子节点右侧的加号:会弹出如下所示的“添加前端资源”的对话框:在“资源名称”输入框内输入:update,然后在下面的资源类型列表里点击“数据修