Question

我在让iScroll（v5）与Meteor合作时遇到了问题。我已经安装了包没有问题，但是当文件加载时调用iScroll会有点麻烦。

Meteor不像iScroll演示那样支持身体上传，所以我试过了：

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对文件进行双重包装。用于传递给iScroll的外部div my_collection和一个实际上被iScroll的JS移动的内部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);
  }
}

确保您在CSS中为您的包装div设置了overflow: hidden;（即.my_collection），并且您很高兴。

Meteor iScroll 5初始化

1 个答案: