2

我在让 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 函数中。再次，它似乎有时工作而不是其他人？

对不起，如果我是一个菜鸟，但流星模板渲染证明很难让我明白。

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

斯蒂芬

4

1 回答 1

4

您需要确保 Meteor 的反应式渲染不会破坏 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 双重包装您的收藏。用于传递给 iScroll的外部 div ，以及实际上将被 iScroll 的 JS 移动my_collection的单个内部 div 。scroller

还要注意#isolate周围的块items- 这告诉 Meteor 不要在该块之外传播重新渲染，这样当集合更改时，外部 DOM（包装器和滚动节点）不会被替换。

现在让我们初始化 iScroll 并添加适当的簿记以在 DOM 因 Meteor 的反应性而发生变化时保持运行：

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);
  }
}

确保您已overflow: hidden;在 CSS 中为您的包装器 div 设置（即.my_collection），并且一切顺利。

于 2013-11-22T22:32:33.703 回答