1

我创建了一个 jsFiddle 创建一个基本示例。

http://jsfiddle.net/7PwsS/532/

它在 jsFiddle 上运行良好，将它放在我的 Meteor 应用程序中，当我单击链接时它不起作用，如果我滚动它。

这是我的 layout.html 流星代码：

<template name="layout">
  {{> yield}}   
</template>


<template name="index">
<div id="fullpage">
 <div id="section0" class="section" data-anchor="firstPage">
    <div class="col-sm-12 text-center">
      <h1>fullPage.js</h1>
      <ul id="menu">
        <li data-menuanchor="firstPage">
          <a href="#secondPage">First slide</a>
        </li>
      </ul>
    </div>
    </div>
      <div id="section1" class="section" data-anchor="secondPage">
        <div class="col-sm-12 text-center">
          <h1>fullPage.js</h1>
            <ul id="menu">
              <li data-menuanchor="firstPage">
                <a href="#firstPage">First slide</a>
              </li>
            </ul>
        </div>
      </div>
    </div>
</template>

Lib 文件夹中的 Routes.js 文件

Router.configure({
  layoutTemplate: 'layout'
});

Router.map(function () {
  this.route('index', {
    path: '/'
  });
});

服务器文件夹中的 Script.js 文件

Template.index.rendered = function () {
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage'],
        menu: '#menu'
    });
};

这很奇怪，我猜想与铁路由器有关？

干杯

Ĵ

4

2 回答 2

1

您应该使用moveTo() fullPage.Js 函数，以保持您的熨斗设置简单... FullPage doc over here

并使用流星模板事件处理程序处理页面滚动，如下所示：

Template._header.events({
    "click .scroll-link": function(evt, tpl){
      var sNum = $(evt.currentTarget).data().section;
      //console.log('section number is: '+ sNum);
        evt.preventDefault();
        $.fn.fullpage.moveTo(sNum, 0);
    }
});
<template name="_header">
  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <div class="container">
          <a class="brand-logo " href="{{pathFor home}}">HOME</a>
          <ul id="menu" class="right">
            <li> <a class="scroll-link" data-section="1">first</a></li>
            <li> <a class="scroll-link" data-section="2">second</a></li>
            <li> <a class="scroll-link" data-section="3">third</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

这样，您将获得两个世界中最好的...

于 2015-05-13T14:48:05.110 回答
0

iron-router您可以通过提供如下自定义来决定应捕获哪些链接linkSelector：

Router.configure({
   linkSelector: /* selector for iron-router-links */
});
于 2014-04-14T21:29:38.733 回答