프로젝트를 수행 할 때 풀다운 새로 고침 기능이 매우 일반적이므로 어떻게 구현합니까? 아래에서 편집기는 Ionic을 사용하여 페이지 드롭 다운 새로 고침 기능을 구현하는 방법을 소개합니다. 봅시다!
특정 구현은 다음 소스 코드를 참조하십시오.
HTML 코드
Ion-Refresher : 풀다운으로 새로 고침되는 아이콘입니다.
Pulling-Text = "Pulling Down Refresh"여기서 질문은 마음대로 대체 될 수 있습니다.
on-refresh = "dorefresh ()"이것은 당겨질 때 실행 해야하는 방법입니다. 다음은 상쾌한 페이지 데이터입니다.
<body ng-app = "starter"ng-controller = "actionsheetctl"> <iion-pane> <iion-content> <iion-refresher pulling-text = "drop-down refresh"on-refresh = "dorefresh ()"> </iion-refresher> <irion-item ng-repeat = "항목 in impin in ime in in im in ime ng-bind = "item.name"> </ision-item> </ision-list> </ision-content> </iion-pane> </body>
자바 스크립트 코드
$ scope.ITEMS [] 이것은 방금 페이지에 들어온 데이터입니다.
dorefresh () 분명히 이것은 새로 고침을 원할 때 실행하는 방법입니다.
item.json 이것은 당신이 클릭하여 새로 고쳐서 데이터를 다시 준비해야 할 때입니다. 이 JSON은 최신 데이터입니다. 프로젝트에서는 서버에서 데이터를 다시 구입하고 클라이언트로 업데이트해야합니다.
Angular.Module ( 'starter', [ 'Ionic']). run (function ($ itionicplatform) {$ irionicplatform.ready (function () {// 액세서리 막대를 기본적으로 숨기십시오 (window.cordova && window.corbob.keyboard). {cordova.plugins.keyboard.hidekeyboardAccessoryBar (true);} if (wind , '$ http', function ($ scope, $ timeout, $ http) {$ scope.items = [{ "name": "html5"}, { "name": "javaScript"}, { "name": "css3"}]; $ scope.dorefresh = function () {// 주소가 부여한다는 점에 유의하십시오. 문제 $ http.get ( 'http://www.aliyue.net/demo_source/item.json')item.json 파일 데이터 :
[{ "name": "Rookie Tutorial"}, { "name": "www.aliyue.net"}]이온은 페이지 드롭 다운 새로 고침 (Ion-Refresher 기능)을 구현하고 당신을 너무 많이 소개합니다. 앞으로 슬라이드 업로드 및 더 많은 기능을 구현하는 방법을 소개하겠습니다. Wulin.com이 제공하는 흥미로운 콘텐츠에 계속주의를 기울이십시오.