我想用 KnockoutJS 让不同的页面滑入和滑出视口。
我的页面目前不使用 jQuery,所以我想避免使用它。
它应该使用 CSS 过渡。
这可以通过绑定来完成,但首先我们需要按钮的辅助函数。它返回一个将可观察对象设置为特定值的单击处理程序。它可以像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)});