我正在为网络应用程序提供移动支持。我的应用程序中有一个要求,即下拉屏幕刷新页面以获取最新更新。我在iPhone原生应用程序中看到了这个功能,它也在twitter和foursquare移动网站上实现。
我在这里看过一些帖子,但我无法理解他们到底在说些什么。 我对这种环境很新。请指导我做这个功能。
这个功能有没有javascript库或jqueries?
答案 0 :(得分:6)
基本上,只使用被劫持的javascript滚动机制(如iScroll)公开实现了pull to refresh。这就是Twitter如何做到这一点 - 使用某种js webkit css3滚动库。但是,即使在iPhone 4上,你也会注意到,推特在移动网络中的滚动很简陋而不是100%自然。
昨天,我写了一个滚动来刷新overflow: scroll
组件的处理程序。现在iPhone正在支持overflow: scroll
,我们不必再劫持滚动了。当Apple修复当前的iOS -webkit-overflow-scrolling时,尤其如此:触摸错误。
我还不能提供我的代码开源,但这里是用来做这个的界面,有一些评论。
(function(window, $, undefined) {
var hasTouch = 'ontouchstart' in window,
startEvent = hasTouch ? 'touchstart' : 'mousedown',
endEvent = hasTouch ? 'touchend' : 'mouseup';
var STATES = {
...
};
var CLASS_NAMES = {
...
};
var PullToReload = function(callback, wrapper, instructionsContent) {
// create all the dom elements and append the right before a content wrapper, but after a primary main wrapper.
// <div class="mainWrapper" style="overflow: scroll; height: 600px;"><div class="pullToReloadWrapper"></div><div class="contentWrapper"></div></div> is the markup.
// Check if the main wrapper's height is bigger than the content wrapper's height. If so, then change the main wrapper height to be the height of the content wrapper.
// scroll main wrapper by the reload wrapper's height.
// set state to pull
// invoke initEvents()
};
PullToReload.prototype.setState = function(state) {
// set the state of either pull, update, or release. Change CSS classes and content.
}
// boiler plate event handling switch
PullToReload.prototype.handleEvent = function(e) {
switch (e.type) {
case startEvent:
this.start(e);
break;
case "scroll":
this.scroll(e);
break;
case endEvent:
this.end(e);
break;
}
};
PullToReload.prototype.initEvents = function() {
// add event listeners for startEvent and endEvent with method "this"
// calling this in an event listener automatically calls handleEvent()
};
PullToReload.prototype.start = function() {
// start listening to on scroll for the wrapper
};
PullToReload.prototype.end = function(e) {
// remove scroll event listener
// if the current state is in release, then set state to update and invoke the callback,
// else the state is in pull, then invoke reset()
};
PullToReload.prototype.scroll = function(e) {
// if current scroll position is almost to the top, change state to release.
// else put it back to pull state.
};
PullToReload.prototype.reset = function() {
// animate scroll to height of reload component.
// put css classes back to the beginning
};
})(window, jQuery, I);
此解决方案适用于iOS5,Safari,Chrome以及其他可能的解决方案。我不得不在几个地方使用jQuery,主要是动画滚动。
此解决方案不需要css3滚动处理程序,只需要overflow: scroll;
答案 1 :(得分:5)
首先学习JavaScript,XHttpRequests,然后触摸事件。
刷新的提示只不过是XHR(AJAX)调用的触发器,它会在所需的元素上附加新数据。
但如果您想要一个简短的答案,请查看Cubiq的iScroll 4 http://cubiq.org/iscroll-4
最好的滚动JS。
以下是示例:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/