如何将 scrollIt 与流星一起使用

How do I use scrollIt with Meteor?

本文关键字：一起 流星 scrollIt      更新时间：2023-09-26

如何在Meteor中使用scrollIt？ 我知道 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） 在每个部分放置一个数据滚动索引属性

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

3） 在每个导航元素上放置相应的数据滚动导航属性

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

4）对于指向部分的链接，请添加数据滚动转到属性

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

5） 调用滚动它（）

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

首先欢迎来到 Stackoverflow。其次，我在这里假设，对流星的基本理解。我只会为您的 meteor 项目中的插件提供 html 模板代码和相关 js 代码

以下是您的用例的步骤

步骤1：将scroll.js库文件放在项目根目录下的client目录中

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

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

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

滚动模板.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。

我还没有测试过它，但它应该可以工作

相关文章：