Question

如何将scrollIt与Meteor一起使用？我知道jQuery包含在Meteor中，但是我是否需要添加对scrollIt的引用，这对Meteor来说是不对的？

1）包括jQuery和scrollIt.js

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scrollIt.js" type="text/javascript"></script>

2）在每个部分放置一个data-scroll-index属性

<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>

3）在每个导航元素上放置相应的data-scroll-nav属性

<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>

4）对于部分的链接，请设置data-scroll-goto属性

<a data-scroll-goto="0">Back to top</a>

5）调用scrollIt（）

$(function(){
  $.scrollIt();
});

Answer 1

首先欢迎来到Stackoverflow。第二，我假设在这里，对流星有基本的了解。我将在你的流星项目中为插件提供html模板代码和相关的js代码

按照您的用例的步骤

Step-1 ：将您的scroll.js lib文件放在项目根目录下的client目录下

所以，它会像<your-project-lib>/client/scrollit.js

您无需在任何地方添加脚本标记。流星处理它。

Step-2 ：将html代码放在模板中，如下所示 -

scrollTemplate.html

<template name="scrollTemplate.html">

 <div data-scroll-index="0">..content..</div>
 <div data-scroll-index="1">...</div>
 <div data-scroll-index="2">...</div>

 <~!-- Your whatever html code will go inside here -->
 <a data-scroll-nav="0">About</a>
 <a data-scroll-nav="1">Usage</a>
 <a data-scroll-nav="2">Options</a>
</template>

第3步：在rendered模板事件中初始化滚动

Template.scrollTemplate.rendered= function(){
   $.scrollIt();
}

模板的呈现事件类似于ready事件，但仅适用于模板内的html。

我没有测试过，但应该可以使用

如何将scrollIt与Meteor一起使用？

1 个答案: