プロジェクトを行っているとき、プルダウンの更新機能は非常に一般的です。それで、どのように実装しますか?以下に、エディターがIonicを使用してページドロップダウンリフレッシュ機能を実装する方法を紹介します。見てみましょう!
特定の実装については、次のソースコードを参照してください。
HTMLコード
Ion-Refresher:プルダウンでリフレッシュされるアイコンです。
tulling-text = "プルダウンリフレッシュ"ここでの質問は、それと同じように自由に置き換えることができます。
on-refresh = "dorefresh()"これは、引き下げるときに実行する必要がある方法です。これがさわやかなページデータです。
<body ng-app = "starter" ng-controller = "actionsheetctl"> <ion-pane> <ion-content> <ion-refresher pulling-text = "ドロップダウンリフレッシュ" on-refresh = "dorefresh()"> </ion-refresher> <ion-ion-ion-ion-item ng-repeat = "アイテム" ng-bind = "item.name"> </ion-item> </ion-list> </ion-content> </ion-pane> </body>
JavaScriptコード
$ scope.items []これはページに入ったばかりのデータです
dorefresh()明らかにこれは、更新するときに実行する方法です
item.jsonこれは、クリックして更新するときであり、データを再獲得する必要があります。このJSONは最新のデータです。このプロジェクトでは、サーバーからデータを再びゲットし、クライアントに更新する必要があります。
Angular.Module( 'Starter'、['Ionic']) {cordova.plugins.keyboard.hidekeyboardaccessorybar(true);} if(window.statusbar){statusbar.styledefault();}});})。 、 '$ http'、function($ scope、$ timeout、$ http){$ scope.items = [{"name": "html5"}、{"name": "javascript"}、{"name": "css3"}];クロスドメインの問題$ http.get( 'http://www.aliyue.net/demo_source/item.json')。 {$ scope。$ broadcast( 'scroll.refreshcomplete');});};}]))item.jsonファイルデータ:
[{"name": "Rookie Tutorial"}、{"name": "www.aliyue.net"}]Ionicはページのドロップダウンリフレッシュ(Ion-Refresher関数)を実装し、あなたに多くを紹介します。将来的には、スライドアップロードとその他の機能を実装する方法を紹介します。 wulin.comによってもたらされたエキサイティングなコンテンツに引き続き注意を払ってください。