[ionic開源項目教程] - 第12講 醫學模組的實現以及Service層loadMore和doRefresh的提取封裝

標籤：

關注訂閱號：TongeBlog，可查看[ionic開源項目]全套教程。

這一講主要實現tab2【醫學】模組，【醫學】模組跟tab1【健康】模組類似。

[ionic開源項目教程] - 第12講 醫學模組的實現以及Service層loadMore和doRefresh的提取封裝

[]

1.實現tab2.html【醫學】模組的視圖部分實現(跟tab1.html類似)：

<ion-view view-title="醫學"><ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)"><ion-slide ng-repeat="slide in slides">  <ion-content>    <ion-refresher pulling-text="下拉重新整理" on-refresh="slide.doRefresh()"></ion-refresher>    <div class="list has-header">      <a ng-repeat="item in slide.items" class="item item-thumbnail-right item-text-wrap" ng-click="goDetails(item,‘{{slide.type}}‘)">        <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">        <h3>{{::item.name}}</h3>        <p>{{::item.description | substring:item.description}}</p>      </a>     </div>    <ion-infinite-scroll ng-if="!slide.isload" on-infinite="slide.loadMore()" distance="1%">    </ion-infinite-scroll>  </ion-content></ion-slide>  </ion-slide-box> <ion-tabs id="{{currentTabId}}" class="tabs-striped tabs-top"><ion-tab ng-repeat="item in tabs" on-select="selectedTab($index)" title="{{item.name}}"></ion-tab> </ion-tabs></ion-view>

 

注意：tab2.html也為tabs組建定義了唯一標識currentTabId。

2.完善Service層的Tab3Service

為了實現代碼重用，這裡將loadMore和doRefresh單獨提到外邊來實現，3個tab分別對兩個方法調用。(大家有興趣可研究著將健康模組的service層Tab1Service也按照此方式對loadMore和doRefresh進行封裝)

.service(‘Tab2Service‘, function ($http) {var loadMore = function ($this) {  console.log("正在載入更多資料..." + $this.page);  $http.get($this.url + "?page=" + $this.page + "&rows=" + settings.rows).success(function (response) {    console.log(response);    if (response.list) {      $this.items = $this.items.concat(response.list);      $this.page++;    } else {      console.log("沒有資料了...")      $this.isload = true;    }    $this.callback();  });}var doRefresh = function ($this) {  console.log("正在執行refresh操作...");  $http.get($this.url + "?page=1&rows=" + settings.rows).success(function (response) {    console.log(response);    if (response.list) {      $this.page = 2;      $this.items = response.list;    }    $this.callback();    $this.isload = true;  });}this.getTab2Menu = function () {  return [    {      name: ‘疾病查詢‘, isload: true, url: server.domain + ‘/disease/list‘, type: ‘disease‘,      page: 1, rows: 20,      items: [],      loadMore: function () {        loadMore(this);      },      doRefresh: function () {        doRefresh(this);      },      callback: function () {        //回掉函數      }    },    {      name: ‘病狀查詢‘, isload: true, url: server.domain + ‘/symptom/list‘, type: ‘symptom‘,      page: 1, rows: 20,      items: [],      loadMore: function () {        loadMore(this);      },      doRefresh: function () {        doRefresh(this);      },      callback: function () {        //回掉函數      }    },    {      name: ‘檢查項目‘, isload: true, url: server.domain + ‘/check/list‘, type: ‘check‘,      page: 1, rows: 20,      items: [],      loadMore: function () {        loadMore(this);      },      doRefresh: function () {        doRefresh(this);      },      callback: function () {        //回掉函數      }    },    {      name: ‘手術項目‘, isload: true, url: server.domain + ‘/operation/list‘, type: ‘operation‘,      page: 1, rows: 20,      items: [],      loadMore: function () {        loadMore(this);      },      doRefresh: function () {        doRefresh(this);      },      callback: function () {        //回掉函數      }    }  ]}})

 

3.完善Tab2的控制器層Tab2Ctrl

依賴注入Tab2Service，調用getTab2Menu()構建頁面的data和action，注意這裡要給currentTabId賦值。

.controller(‘Tab2Ctrl‘, function ($scope, $state, Tab2Service, $controller, $ionicTabsDelegate) {        $scope.classify = Tab2Service.getTab2Menu()        $scope.currentTabId = "tab2";        $controller(‘BaseCtrl‘, { $scope: $scope });        $scope.goDetails = function (item, type) {            var title = "", name = "";            if (item.title) {                title += item.title;            }            if (item.name) {                title += item.name;            }            $state.go(‘tab.tab2-details‘, { id: item.id, title: title, type: type })            $ionicTabsDelegate.showBar(false);        }    })

 

痛點和注意事項

• 記得給currentTabId賦值
• Service層loadMore和doRefresh的提取封裝

到這裡如果有任何問題，請通過文章最下面的連絡方式聯絡我。

[ionic開源項目教程] - 第12講 醫學模組的實現以及Service層loadMore和doRefresh的提取封裝