草庐IT

ios - Ionic2 iOS 转换阻止点击或点击一秒钟

coder 2023-09-23 原文

我对 Ionic2 Final 在 iOS 上的点击行为有疑问。

页面转换后，点击或点击卡片在 1-2 秒内不起作用，因此用户必须点击或点击两次(或稍等片刻再点击)。我已经尝试使用 <a>在卡内，而不是直接将点击连接到卡上。我也试过(click), (tap), [navpush]我尝试添加 tappable到卡上。

<ion-content padding class="modules card-background-page">
  <ion-card  class="module-card" *ngFor="let module of modules">
  <a (tap)="tapEvent($event)" (click)="clickEvent($event)" [navPush]="modulePage" [navParams]="{id: module.id}" >
    <img src="{{module.thumbnail}}"/>
    <div class="card-content">
      <div class="card-title">
          <strong>Module {{module.number}}</strong>
      </div>
      <div class="card-subtitle">
          <strong *ngIf="translate.currentLang!='fr'">{{module.subtitle_en}}</strong>
          <strong *ngIf="translate.currentLang=='fr'">{{module.subtitle_fr}}</strong>
      </div>
    </div>
  </a>
  </ion-card>
</ion-content>

在 Android 上运行良好。

经过大量试验和错误后，我通过使用 android 转换“修复”了这个问题:

    IonicModule.forRoot(MyApp, {
      pageTransition: 'md-transition'
    }),

所以问题似乎出在 iOS 转换上。知道如何真正解决这个问题吗？有人有同样的问题吗？我还遇到了在转换后很短时间内点击“返回”或关闭侧边菜单的问题。但是，这些并不那么容易复制。

iPhone 6S 上的 iOS 10.1.1

最佳答案

问题似乎出在用于过渡的实际动画上。您可以通过在按下 navCtrl 时调整动画的时间(和缓动)来解决这个问题。您可以通过提供一个可选的选项对象作为最后一个参数来做到这一点。

this.navCtrl.push('MyPage', null, {
  duration: 200,
  easing: 'cubic-bezier(0.36,0.66,0.9,1)'
});

解释如下......

原始动画设置为 500 毫秒，太长了。然而，实际的视觉动画实际上并没有花那么长时间，因为原始动画的三次贝塞尔曲线在最后 200-300 毫秒非常平坦(如下图所示)。

这就是缓动也必须改变的原因。

Original: cubic-bezier(0.36,0.66,0.04,1) Changed to: cubic-bezier(0.36,0.66,0.9,1)

为了使应用程序在向后导航时更快，以及在 View 中按下后退按钮时必须添加相同的动画。这可以通过覆盖 NavBar 的后退按钮行为来完成。

因此将其添加到您的页面组件

@ViewChild(Navbar) navBar: Navbar;

ionViewDidLoad() {
  this.setBackButtonAction()
}

//Method that overrides the default back button action
setBackButtonAction() {
  this.navBar.backButtonClick = () => {
    this.navCtrl.pop({
      duration: 200,
      easing: 'cubic-bezier(0.36,0.66,0.9,1)'
    });
  }
}

对于构建源代码的任何人(或想要向 Ionic 团队提供拉取请求)。原始值在 ios-transition.ts 中设置，应该在那里更改

const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';

编辑:我已经向 Ionic 团队提交了拉取请求 https://github.com/ionic-team/ionic/pull/13029

关于ios - Ionic2 iOS 转换阻止点击或点击一秒钟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42343749/

秒钟Ionic2codestrong34iosclicktransitions

有关ios - Ionic2 iOS 转换阻止点击或点击一秒钟的更多相关文章

  1. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  2. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  3. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  4. ruby - 为什么不能使用类IO的实例方法noecho？ - 2

    print"Enteryourpassword:"pass=STDIN.noecho(&:gets)puts"Yourpasswordis#{pass}!"输出:Enteryourpassword:input.rb:2:in`':undefinedmethod`noecho'for#>(NoMethodError) 最佳答案 一开始require'io/console'后来的Ruby1.9.3 关于ruby-为什么不能使用类IO的实例方法noecho？，我们在StackOverflow上

  5. ruby - Sinatra:点击 URL 时运行 ruby​​ 代码 - 2

    我想在每次访问url/code时运行一个脚本(code.rb)。如何运行脚本？require'sinatra'get'/'do#runthescriptend 最佳答案 要么fork另一个进程:system('rubycode.rb')...或者简单地将脚本加载到当前上下文中:load'code.rb'#*not*require 关于ruby-Sinatra:点击URL时运行ruby​​代码，我们在StackOverflow上找到一个类似的问题： https:

  6. ruby - 难倒点击与 nokogiri 和 Mechanize 的链接 - 2

    也许我做错了，或者还有另一种更有效的方法。这是我的问题:我首先使用nokogiri打开一个html文档并使用其css遍历该文档，直到找到我需要单击的链接。现在我有了链接后，如何使用Mechanize来点击它？根据文档，Mechanize.new返回的对象是字符串或Mechanize::Page::Link对象。我不能使用字符串-因为可能有100个相同的链接-我只想Mechanize点击nokogiri遍历的链接。有什么想法吗？ 最佳答案 找到所需的链接节点后，您可以手动创建Mechanize::Page::Link对象，然后单击它:

  7. ruby - 为 IO::popen 拯救 "command not found" - 2

    当我将IO::popen与不存在的命令一起使用时，我在屏幕上打印了一条错误消息:irb>IO.popen"fakefake"#=>#irb>(irb):1:commandnotfound:fakefake有什么方法可以捕获此错误，以便我可以在脚本中进行检查？ 最佳答案 是:升级到ruby​​1.9。如果您在1.9中运行它，则会引发Errno::ENOENT，您将能够拯救它。(编辑)这是在1.8中的一种hackish方式:error=IO.pipe$stderr.reopenerror[1]pipe=IO.popen'qwe'#

  8. ruby - IO::EAGAINWaitReadable:资源暂时不可用 - 读取会阻塞 - 2

    当我尝试使用“套接字”库中的方法“read_nonblock”时出现以下错误IO::EAGAINWaitReadable:Resourcetemporarilyunavailable-readwouldblock但是当我通过终端上的IRB尝试时它工作正常如何让它读取缓冲区？ 最佳答案 IgetthefollowingerrorwhenItrytousethemethod"read_nonblock"fromthe"socket"library当缓冲区中的数据未准备好时，这是预期的行为。由于异常IO::EAGAINWaitReadab

  9. ruby - 如何使用 ruby​​ fibers 避免阻塞 IO - 2

    我需要将目录中的一堆文件上传到S3。由于上传所需的90%以上的时间都花在了等待http请求完成上，所以我想以某种方式同时执行其中的几个。Fibers能帮我解决这个问题吗？它们被描述为解决此类问题的一种方法，但我想不出在http调用阻塞时我可以做任何工作的任何方法。有什么方法可以在没有线程的情况下解决这个问题？ 最佳答案 我没有使用1.9中的纤程，但是1.8.6中的常规线程可以解决这个问题。尝试使用队列http://ruby-doc.org/stdlib/libdoc/thread/rdoc/classes/Queue.html查看文

  10. ruby - 如何从 ruby​​ 中的 IO 对象获取文件名 - 2

    在ruby中...我有一个由外部进程创建的IO对象，我需要从中获取文件名。然而我似乎只能得到文件描述符(3)，这对我来说不是很有用。有没有办法从此对象获取文件名甚至获取文件对象？我正在从通知程序中获取IO对象。所以这也可能是获取文件路径的一种方式？ 最佳答案 关于howtogetathefilenameinC也有类似的问题,我将在这里以ruby​​的方式给出这个问题的答案。在Linux中获取文件名假设io是您的IO对象。以下代码为您提供了文件名。File.readlink("/proc/self/fd/#{io.fileno}")例

随机推荐