javascript - 如何在 KnockoutJS 中创建 "sliding pages"效果？

Question

我希望使用 KnockoutJS 将不同的页面滑入和滑出视口(viewport)。

我的页面目前没有使用 jQuery，所以我想避免使用它。

它应该使用 CSS 过渡。

Answer 1

这可以通过绑定(bind)来完成，但首先我们需要为我们的按钮提供一个辅助函数。它返回一个将可观察对象设置为特定值的点击处理程序。它可以像 data-bind="click: page.set(1) 一样使用。

ko.observable.fn.set = function(value) {
  var obs = this;
  return function(){ obs(value); }
}

现在我们的 HTML 将在页面容器 (.pages) 中有一个绑定(bind)，告诉我们要在哪个页面上。每个页面都有一个简单的类，我们用它来描述它们。

<div class="pages" data-bind="page: page">
  <div class="page text-center">
    <h1>Page 1</h1>
    <button class="btn" data-bind="click: page.set(1)">Go to Page 2</button>
  </div>
</div>

我们的 CSS 有点奇怪。我们需要使 .pages 比正文大得多，并隐藏水平滚动条。请注意，我们可以将 10,000 除以我们的 .pages 宽度以获得我们的 .page 宽度——这总是正确的。我们还有一个用于在页面之间滑动的简单过渡。

html, body { width: 100%; height: 100%; overflow-x: hidden; }

.pages { 
  width: 10000%; height: 100%; position: relative; 
  transition: left .5s ease-in-out;
}

.page { width: 1%; height: 100%;  float: left;}

最后，我们的绑定(bind)处理程序查看它是什么页面，并确定正确的大小。请注意第 0 页是第一个。

ko.bindingHandlers.page = {
  update: function(element, valueAccessor) {
    var position = ko.unwrap(valueAccessor());

    console.log(position);
    element.style.left = position * -100 + "%";
  }
}

ko.applyBindings({page: ko.observable(0)});

现在我们可以绑定(bind)我们的页面 observable。

ko.applyBindings({page: ko.observable(0)});

和一个demo把它包起来