序文
前のセクションでは、プルダウンの更新とプルアップの読み込みをより多くの効果を使用する必要があるモバイルプロジェクトがありました。私の心の最初の反省は、ウェイボの効果でした。最初は、私の理解にいくつかの逸脱がありました。プルダウンも追加データであり、プルアップは追加データであると思いました。その後、私は同僚に尋ねました、そして、プルダウンは最新のデータの単なる更新であり、プルアップが追加データであることがわかりました。
使用のヒント
1. iscroll.jsを参照し、初期化中に2つのイベントリスニングを追加します:touchmoveとdomcontentloaded。
2。IsCrollプラグインのOnScrollendイベントを実装します。つまり、このイベントでは、独自のAjaxメソッドに電話してデータを更新および追加します。
3.バックグラウンドでより多くのリクエストを引き上げてロードすると、リクエストデータのページングに相当します。この時点で、Ajaxリクエスト中にPageIndexパラメーターを送信する必要があり、ロードを初期化するときは、前景から裁判官の背景からPageCountを返す必要があります。
4.最も重要なことは、Pulldown Refresh Method(Pulldownaction)とPullup Load More(Pullupaction)メソッドを実装することです。
実行効果図
実装方法
var myscroll、pulldownel、pulldownoffset、pullupel、pullupoffset、generatedcount = 0;/** * pull-down Refresh(この方法をカスタマイズ) * myscroll.refresh();データが読み込まれたら、インターフェイス更新方法 */function pulldownaction(){setimeout(){var el、li、i; el = document.getelementbyid( 'thelist'); for(i = 0; i <3; i ++){li = document.createelment( 'li'); el.ChildNodes [0]); myscroll.refresh(); }/** *ページをスクロールしてターン(この方法をカスタマイズ) * myscroll.refresh(); //データの読み込み後、インターフェイス更新方法を呼び出します*/function pullupaction(){settimeout(){// < - ネットワークの輻輳をシミュレート、生産からsetimeoutを削除! (++ generatedcount); }/*** iScrollコントロールを初期化*/function loaded(){pulldownel = document.getElementById( 'pulldown'); pulldownoffset = pulldownel.offsetheight; pullupel = document.getElementById( 'Pullup'); pullupoffset = pullupel.offsetheight; myscroll = new iscroll( 'wrapper'、{scrollbarclass: 'myscrollbar'、usetransition:false、topoffset:pulldownoffset、onrefresh:function(){if(pulldownel.classname.match( 'loading')){pulldownel.classname = ''; pulldownel.queryselector('。pulldownlabel ') (){if(this.y> 5 &&!puldownel.classname = 'flip'; pulldownel.classname.match( 'flip')){pulldownel.classownel.queryselector( '。pulldownlabel')。 !pullupel.classname.match( 'flip')){pullupel.classname = 'flip'; pullupel.classname.match( 'flip')){pullupel.classname = ''; pulldownel.classname = 'loading'; pullupel.queryselector('。pulluplabel ')。 setimeout(function(){document.getElementById( 'wrapper')。style.left= '0';}、800);} //結合iscrollコントロールdocument.addeventlistener( 'touchmove'、function(e){e){e.preventdefault();}、false);要約します
主なことは、IsCrollでいくつかの初期化操作を実行し、異なるアクションのために異なる迅速な情報を表示し、対応する更新を記述し、プルダウンおよびプルアップイベントのためにより多くの処理方法をロードすることです。