Question

我希望使用KnockoutJS将不同的页面滑入和移出Viewport。

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

它应该使用CSS转换。

Answer 1

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

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

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

<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比身体大得多，并隐藏水平滚动条。请注意，我们可以将.pages宽度除以10,000以获得.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;}

最后，我们的绑定处理程序会查看它是什么页面，并确定正确的大小。请注意，第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)});

现在我们可以将页面绑定为observable。

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

如何在KnockoutJS中创建“滑动页面”效果？

1 个答案:

和一个demo将它全部包装起来