1

我想用 KnockoutJS 让不同的页面滑入和滑出视口。

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

它应该使用 CSS 过渡。

4

1 回答 1

6

这可以通过绑定来完成,但首先我们需要按钮的辅助函数。它返回一个将可观察对象设置为特定值的单击处理程序。它可以像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的比body大很多,并隐藏水平滚动条。请注意,我们可以将 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;}

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

和一个完整的演示

于 2013-08-16T04:39:46.030 回答