Ionicは現在、最も有望なHTML5モバイルアプリケーション開発フレームワークです。 SASSを介してアプリケーションを構築します。SASSは、開発者が強力なアプリケーションを開発するのに役立つ多くのUIコンポーネントを提供します。 JavaScript MVVMフレームワークとAngularJSを使用してアプリケーションを強化します。データの双方向のバインディングを提供し、それを使用することは、Webおよびモバイル開発者にとって一般的な選択肢になります。 Ionicは、Web開発技術の使用に焦点を当てた開発フレームワークであり、HTML5に基づいた携帯電話プラットフォームと同様のネイティブアプリケーションを作成します。イオンフレームワークの目的は、Webの観点からモバイルアプリケーションを開発することです。これは、さまざまなプラットフォーム上のアプリケーションにコンパイルできるPhoneGapの編集プラットフォームに基づいています。
この記事では、IOINCでプルダウンの更新とプルアップロード機能を実装する方法を紹介します。この機能は、プロジェクト開発中に多くの場合発生します。興味のある友達は見ることができます。
HTMLパーツ
<ion-view view-title = "message notification"> <ion-content> <! - <ion-refresher>プルダウンリフレッシュコマンド - > <ion-refresher pulling-text = "プル=" reshow = "on-refresh =" > <div> {{message.title}} <i ng-click = "vm.show(message)" ng-class = "message.static? 'ion-arrow-right-b'" )}} </div> </div> <! - infinite-infinite-scrollプルアップデータ読み込み命令距離%nf-ifの値がfalseの場合、infinite-infinite-scroll ng-if = "!vm.moredata" on-finite = "vm. load()" distant " >/ion-infinite-scroll> </ion-content> </ion-view>JSパート
•オンフレッシュプルダウンによってトリガーされた関数関数は、関数関数の実行の終了前にブロードキャストする必要があります。
•オンフィニットプルアップによってトリガーされた関数は、ブロードキャストイベント$ scopeを終了する必要があります。
Angular.Module( 'Starter.Controllers'、[])。コントローラー( 'infoctrl'、function($ rotscope、$ timeout、$ interval、$ scope、$ http、services){var vm = $ scope.vm = {moredata:false、メッセージ:[] {services.getMessages({perpage:vm.pagination.page、page:vm.pagination.currentpage}、function(data){vm.messages = data;})}、show:function(message){(message.static){message.static = false;} {$ scope。$ broadcast( 'scroll.refreshcomplete');}、);}、loadmore:function(){vm.pagination.currentpage +=; services.getMessages({perpage:vm.pagination.parpage、page:vm.pagination.currentpage}、unction(data) (data.length ==){vm.moredata = true;}; $ scope。$ broadcast( 'scroll.infinitescrollcomplete');})}} vm.init();})ここのメッセージはビューによって表示されるデータであり、ページネーションはページネーションロード用に表示されるパラメーター、サービスは私がカプセル化した$ httpサービスであり、表示方法はビュー情報表示のスイッチです(これらに注意を払う必要はありません)。
Ionicがエディターが紹介したプルダウンの更新とプルアップロードをどのように実装できるかについて、関連するコンテンツを紹介しました。それがあなたに役立つことを願っています。もっと知りたい場合は、wulin.comのWebサイトに注意してください!