リフレッシュするプルアップとデータ関数を取得するプルダウンを実装するコード例

実際のプロジェクト開発では次のコードを使用して、データ関数を取得するためのプルアップ リフレッシュとプルダウンを実装できます:

/*Slide up to startloading*/
/**
* @author wbr
* スライディングページングサービス
* iScroll.js (v4.2.5) に依存します
* @param create method:
* id: ページ div の ID と一致します
* pullUpFn: pull 後に実行されるロードアップアニメーションの終了 追加のコールバック関数、通常はリモートおよびデータ処理
* pullDownFn: プルダウンアニメーションの終了後に実行されるコールバック関数、通常はリモートおよびデータ処理
* destroy メソッド:
*スクローラー: create メソッドによって返される iScroll オブジェクト
* メソッドを無効にする: プルアップ ページングを停止します
* メソッドを有効にする: プルアップ ページングを再開します
**/
(function( window、未定義) {
'use strict';

var service = {};
service.$scrollPage = [
function() {
return {
create : function(id, pullUpFn, pullDownFn) {
var myScroll,
pullUpEl,
pullDownEl ,
firstScroll = true;

pullUpEl = document.getElementById('pullUp');

pullDownEl = document.getElementById('pullDown');

function pullUpAction() {
pullUpFn(function(isEnd) ) {
// バックグラウンド ページングが終了するかどうかに応じて、ここで TODO が変更されます
if (isEnd) {
// このコード行に注目してください: ユーザーが初めて選択した情報をロードできない場合、別の情報を選択することで通常どおりに使用できます。 このコード行を追加すると、読み込み関数が破棄され、データが正常に読み込めなくなります
// pullUpEl.className = 'nomore';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'これ以上データはありません';
}
});
}

function pullDownAction() {
if (pullDownFn) {
pullDownFn();
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel') .innerHTML = '';
}
}

myScroll = new iScroll(id, {
topOffset : 40,
useTransition : true,
onRefresh : function() {
if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉追加ダウンロードさらに...';
}
if (pullDownEl.className.match("loading")) {
pullDownEl.className = '';
pullDownEl .querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
}
},
onScrollMove : function() {
if (firstScroll) {
this.refresh();
firstScroll = false;
}
if (this.y pullUpEl.className = 'peak ';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手刷新...';
} else if (this.y > (this.maxScrollY - 50) && this.y < (this.maxScrollY) + 100) && !pullUpEl.className.match('goon') && !pullUpEl.className.match('nomore')) {
pullUpEl.className = 'goon';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '继续上拉...';
} else if (this.y >= 0) {
pullDownEl.className = "foot";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手刷新. ..';
} else if (this.y pullDownEl.className = "goon";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '继续下拉...';
}
},
onScrollEnd : function() {
if (pullDownEl.className.match("foot")) {
pullDownEl.className = "loading";
pullDownEl.querySelector( '.pullDownLabel').innerHTML = '加ダウンロード中...';
pullDownAction();
} else if (pullDownEl.className.match("goon")) {
pullDownEl.className = "";
pullDownEl.querySelector ('.pullDownLabel').innerHTML = '下拉刷新...';
}
if (pullUpEl.className.match('peak')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('. pullUpLabel').innerHTML = '加ダウンロード中...';
pullUpAction();
} else if (pullUpEl.className.match('goon')) {
pullUpEl.className = '';
pullUpEl.querySelector(' .pullUpLabel').innerHTML = '上拉加ダウンロードさらに...';
}
}
});
return myScroll;
},
// 上拉分页
disable : function() {
var pullUpEl = document.getElementById('pullUp');
//TODO 此处要重写，对功能暂無影响
pullUpEl.className = 'nomore';
},
//启用上拉分页
enable : function() {
var pullUpEl = document.getElementById('pullUp');
pullUpEl.className = '';
},
//销毁iScroll实例，页面会失去滚動效果
destroy : function(scroller) {
scroller.destroy( );
}
};
}];

vx.module('ibsapp.libraries').service(service);

})(window);

その後就是js中直接使用这个服务了，启動この服务代码：

$scope.scroll = $scrollPage.create("merchant-all", $scope.getMore, $scope.downRefresh);

merchant-allは识别页面中divのid

$scopeです。 getMore は上拉获取データベース メソッドです

$scope.downRefresh は下拉获取新しいメソッドです、特定の希望を追加するためのデータをここに書き込むだけで済みます

以上がリフレッシュするプルアップとデータ関数を取得するプルダウンを実装するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。