Saat Anda melakukan proyek, fungsi penyegaran pull-down sangat umum, jadi bagaimana Anda mengimplementasikannya? Di bawah ini, editor akan memperkenalkan kepada Anda cara menggunakan Ionic untuk mengimplementasikan fungsi refresh drop-down halaman. Mari kita lihat!
Untuk implementasi tertentu, silakan merujuk ke kode sumber berikut:
Kode HTML
Ion-Refresher: adalah ikon yang disegarkan dengan tarik-turun;
Tarik-Teks = "Menarik ke bawah Refresh" Pertanyaan-pertanyaan di sini dapat diganti sesuka hati, seperti halnya;
on-refresh = "dorefresh ()" Ini adalah metode yang perlu kita jalankan saat menarik ke bawah. Berikut adalah data halaman yang menyegarkan.
<body ng-app="starter" ng-controller="actionsheetCtl" ><ion-pane><ion-content ><ion-refresher pulling-text="drop-down refresh" on-refresh="doRefresh()"></ion-refresher><ion-list><ion-item ng-repeat="item in items" ng-bind = "item.name"> </ion-item> </ion-list> </ion-content> </ion-pane> </body>
Kode JavaScript
$ scope.items [] Ini adalah data yang baru saja masuk ke halaman
Dorefresh () Jelas ini adalah metode yang Anda jalankan saat Anda ingin menyegarkan
Item.json Ini adalah saat Anda mengklik untuk menyegarkan dan kami perlu mendapatkan kembali data. JSON ini adalah data terbaru. Dalam proyek, Anda perlu mendapatkan kembali data dari server dan memperbaruinya ke klien.
angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// Sembunyikan bilah aksesori secara default (hapus ini untuk menampilkan bilah aksesori di atas keyboard // untuk input form) if (window.cordova & window.cordova.cord.cordov.cordov.cordov.cordov. Windowin. {cordova.plugins.keyboard.hideKeyboardAccessoryBar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). controller ('actionheetctl', ['$ scope', '$ timeout' , '$ http', function ($ scope, $ timeout, $ http) {$ scope.items = [{"name": "html5"}, {"name": "javascript"}, {name ":" css3 "}; $ scope.dorefresher = {name": "css3"}]; $ scope.dorefresher = {name ": css3"}; $ scope.dorefresher = function () {ceare/{ceare/{$/{$ scee {$ scate/{$ scope that you {) {ceare {ceate {$ scope Masalah Cross-Domain $ http.get ('http://www.aliyue.net/demo_source/item.json') .success (function (newitems) {$ scope.items = newitems;}). Akhirnya (function () {$ scope. $ scroup ('scroll.Data file item.json:
[{"name": "rookie tutorial"}, {"name": "www.aliyue.net"}]Ionic mengimplementasikan refresh drop-down halaman (fungsi ion-refresher) dan akan memperkenalkan Anda. Di masa depan, saya akan memperkenalkan Anda cara menerapkan pemuatan slide-up dan lebih banyak fungsi. Silakan terus perhatikan konten menarik yang dibawa kepada Anda oleh wulin.com.