流星iScroll 5初始化

Question

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

流星不像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的反应式渲染不会破坏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 ，该scroller实际上将被iScroll的JS移动。

还要注意items周围的#isolate块-这告诉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 ）设置，就可以了。