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

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

和一个演示来包装它