In vielen Apps verfügen Nachrichten- oder Anzeigekategorien über Pulldown-Aktualisierungs- und Pullup-Ladeeffekte. Klassen von Drittanbietern, die diesen Effekt erzielen, werden online bereitgestellt (Einzelheiten finden Sie unter MJRefresh und EGOTableViewPullRefresh). Aber in Ihrer Freizeit können wir darüber nachdenken, wie dieser Effekt erzielt werden kann. Ich habe bereits gesagt, dass jede Animation eine Lüge ist. Solange es sich nicht um ein Hardwareproblem handelt, können die meisten Effekte basierend auf der Benutzeroberfläche des Systems erstellt werden.
Der folgende Code wird verwendet, um die Seite per Pulldown auf dem jQuery-Mobiltelefon zu aktualisieren, was dem Spezialeffektcode für den QQ Space-Client oder WeChat-Pulldown zum Aktualisieren der Seite sehr ähnlich ist.
Bitte sehen Sie sich die Darstellung unten an:
Online-Vorschau Quellcode-Download
HTML-Code:
<div id="wrapper">
<ul>
<li>row </li>
<li>row </li>
<li>row </li>
<li>row </li>
<li>row </li>
<li>row </li>
<li>row </li>
<li>row </li>
<li>row </li>
<li>row </li>
</ul>
</div>
<script>
for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
refresher.init({
id: "wrapper",//<------------------------------------------------------------------------------------┐
pullDownAction: Refresh,
pullUpAction: Load
});
var generatedCount = ;
function Refresh() {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.querySelector("#wrapper ul");
el.innerHTML = '';
for (i = ; i < ; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
el.insertBefore(li, el.childNodes[]);
}
wrapper.refresh();/****remember to refresh after action completed！ ---yourId.refresh(); ----| ****/
for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
}, );
}
function Load() {
setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.querySelector("#wrapper ul");
for (i = ; i < ; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
el.appendChild(li, el.childNodes[]);
}
wrapper.refresh();/****remember to refresh after action completed！！！ ---id.refresh(); --- ****/
for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
}, );
}
</script>
Weitere Einzelheiten zu den Prinzipien der Pulldown-Aktualisierung und des Pullup-Ladens sowie die spezifische Einführung erfolgen durch Codeanalyse.
Der Code lautet wie folgt:
// 下拉刷新的原理
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
if (scrollView.contentOffset.y < - 100) {
[UIView animateWithDuration:1.0 animations:^{
// frame发生偏移,距离顶部150的距离(可自行设定)
self.tableView.contentInset = UIEdgeInsetsMake(150.0f, 0.0f, 0.0f, 0.0f);
} completion:^(BOOL finished) {
/**
* 发起网络请求,请求刷新数据
*/
}];
}
}
// 上拉加载的原理
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
NSLog(@"%f",scrollView.contentOffset.y);
NSLog(@"%f",scrollView.frame.size.height);
NSLog(@"%f",scrollView.contentSize.height);
/**
* 关键-->
* scrollView一开始并不存在偏移量,但是会设定contentSize的大小,所以contentSize.height永远都会比contentOffset.y高一个手机屏幕的
* 高度;上拉加载的效果就是每次滑动到底部时,再往上拉的时候请求更多,那个时候产生的偏移量,就能让contentOffset.y + 手机屏幕尺寸高大于这
* 个滚动视图的contentSize.height
*/
if (scrollView.contentOffset.y + scrollView.frame.size.height >= scrollView.contentSize.height) {
NSLog(@"%d %s",__LINE__,__FUNCTION__);
[UIView commitAnimations];
[UIView animateWithDuration:1.0 animations:^{
// frame发生的偏移量,距离底部往上提高60(可自行设定)
self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 60, 0);
} completion:^(BOOL finished) {
/**
* 发起网络请求,请求加载更多数据
* 然后在数据请求回来的时候,将contentInset改为(0,0,0,0)
*/
}];
}
}
Der obige Inhalt ist die detaillierte Erklärung und das Prinzip dieses Artikels für jQuery, um das Pull-up zum Aktualisieren der ursprünglichen ökologischen App und das Pull-down zum Laden weiterer Seiten zu simulieren.
