【问题标题】:Meteor: Whole page refreshing only on mobile when navigating to new route w/ iron-routerMeteor:使用 Iron-router 导航到新路线时,仅在移动设备上刷新整个页面
【发布时间】:2014-09-18 06:42:49
【问题描述】:

我的流星应用程序在桌面上按预期运行,但由于更改路线时不必要的总页面刷新,移动体验很慢。

我已经使用“模拟触摸屏”选项在谷歌开发工具上测试了我的应用程序,并在移动 Chrome 中的 Galaxy S4 上测试了我的应用程序。当我单击触发 Iron-router 路由到新路由的按钮或链接时,整个页面将刷新,而不是包含模板的一个 yield(即页眉和页脚与标签一起重新加载。整个页面)。当“模拟触摸屏”选项未激活并且单击按钮和链接时,桌面上会发生什么以及在{{ > yield }}中快速切换模板的正常行为。正如预期的那样,页面的其余部分不会刷新。我只知道当“模拟触摸屏”选项处于活动状态时,首先触发触摸开始事件,然后触发单击事件导致整个页面刷新。

关于导致此问题的原因以及如何解决此问题的任何想法?

一些示例代码如下:

//makes the button clicked make the page go back
'click .glyphicon-chevron-left' : function(e) {
e.preventDefault();
history.back();
};


// when clicked goes to a preference page
<a id='Preferences'  href="{{pathFor 'pref'}}" data-toggle="collapse"  data-target=".nav- collapse"> Preferences </a> 

将流星版本 0.9.0.1 与以下软件包一起使用: 不安全 标准应用程序包 铁路由器 旋转 铁路由器进度 单页登录 帐户-ui 帐户密码 动画 CSS 流星 natestrauser:连接横幅 mizzao:bootstrap-3

编辑:错误是由与包无关的第 3 方 javascript 文件引起的。如果我能确定问题的具体原因,将进一步更新。

【问题讨论】:

  • 你好,如果你禁用iron-router-progress,并设置一个加载模板会怎样?
  • @NathanM 我刚刚删除了“iron-router-progress”。我已经有一个加载模板集,现在我实际上在加载内容之前在桌面浏览器上看到了加载模板。我以前根本没有看到它。但是,它并没有解决问题;它仍然重新加载整个页面。现在重新加载时,甚至在加载模板可以运行之前,我很快就从单页登录闪存中看到了登录框。还有其他想法吗?谢谢。
  • 我也刚刚删除了“单页登录”,但所做的只是防止登录框闪烁,而是由旋转模板的更长持续时间代替。所以“单页登录”不会导致问题,我会添加回来。无论出于何种原因,touchstart 事件(我没有在我的代码中使用)都会导致整个页面重新加载。
  • 嗯.. 我会继续删除项目,直到它起作用;因为一些粗略的测试表明 Iron-router 可以很好地处理触摸事件。
  • 更新:@NathanM 我已经删除了除以下以外的所有软件包,但仍然存在问题:不安全的标准应用程序包单页登录帐户-ui 帐户密码流星 mizzao:bootstrap-3铁:路由器

标签: jquery mobile meteor iron-router touchstart


【解决方案1】:

我解决了这个问题。

Template.back.events({
        'click #back': function (evt) {
            window.history.back();
            evt.preventDefault();
        },
        'touchstart #back': function () {
            window.history.back();
            evt.preventDefault();
        }
    });

Template.layout.events({
    'touchstart a': function (evt) {
        console.log(evt);
        evt.preventDefault();
        Router.go($(evt.currentTarget).attr('href'));
        return false
    }
});

【讨论】:

    【解决方案2】:

    我遇到了同样的问题。 刚刚删除 axw:ratchet

    【讨论】:

      猜你喜欢
      • 2018-06-19
      • 2014-07-17
      • 2014-10-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-13
      • 2015-03-12
      • 2015-12-16
      相关资源
      最近更新 更多