プルダウンの更新とプルアップロード機能を実装する方法

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サイトに注意してください！