javascript - Meteor iScroll 5 初始化

Question

我在让 iScroll (v5) 与 Meteor 配合使用时遇到问题。我已经安装了该软件包，没有问题，但在文档加载后调用 iScroll 却有点麻烦。

Meteor 不支持像 iScroll 演示中那样的 body onload，所以我尝试了:

if (Meteor.isClient) {
  Meteor.startup(function () {
    var myScroll;
myScroll = new IScroll('#wrapper', { mouseWheel: true });
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
});

}

在我的 main.js 文件中。

这似乎只在我刷新页面后才起作用，并且在我导航到新页面时不会运行。

我还尝试将初始化代码添加到应用程序主页上的 Template.rendered 函数中。再说一次，它似乎有时有效，有时无效？？

抱歉，如果我是个菜鸟，但事实证明 Meteors 模板渲染很难让我理解。

任何人可以提供的任何帮助将不胜感激!!!

斯蒂芬

Answer 1

您需要确保 Meteor 的响应式(Reactive)渲染不会破坏 iScroll 创建的 DOM 节点，并在 iScroll 被破坏并重新创建时重新实例化它们。每当您更改滚动条内的 DOM 时，您还需要调用 iScroll.refresh()，以便它知道更新其尺寸。

让我们看一个示例 - 假设您有一个包含要滚动的集合的模板:

<template name="myCollectionView">
  <div class="my_collection">
    <div class="scroller"> 
      {{#isolate}}
        {{#each items}}
          {{> item}}
        {{/each}}
      {{/isolate}}
    </div>
  </div>
</template>

请注意，您需要用 div 双重包装您的集合。外部 div my_collection 用于传递给 iScroll，以及单个内部 div scroller，实际上将由 iScroll 的 JS 移动。

另请注意 items 周围的 #isolate block - 这告诉 Meteor 不要在该 block 之外传播重新渲染，以便当集合更改时，外部DOM(包装器和滚动器节点)不会被替换。

现在让我们初始化 iScroll 并添加适当的簿记功能，以便在 DOM 由于 Meteor 的 react 性而发生更改时保持其运行:

var scroller; // file-scope instance of iScroll that we will update appropriately
...
Template.myCollectionView.rendered = function () {
  var scrollNode = this.find('.scroller');
  // let's figure out if iScroll is already running by checking whether 
  // it's DOM nodes are still intact. 
  if (scrollNode.style.webkitTransform == "") {
    // either first time rendering, or someone replaced our DOM nodes. 
    // Re-instantiate iScroll.
     scroller = new iScroll(this.find('.my_collection'));
  } else {
    // DOM is still intact, just tell iScroll to update its size
    // You need to do this in a setTimeout to make sure DOM changes
    // have already been rendered (this affects size computations)
    Meteor.setTimeout(function () { scroller.refresh(); }, 0);
  }
}

确保您在 CSS 中为包装器 div(即 .my_collection)设置了 overflow:hidden;，然后就可以开始了。