[ionic开源项目教程]

时间：2021-03-30 08:54:13

关注微信订阅号：TongeBlog，可查看[ionic开源项目]全套教程。

这一讲主要实现tab2【医疗】模块，【医疗】模块跟tab1【健康】模块类似。

[ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装

[效果图]

[ionic开源项目教程]

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的提取封装

到这里如果有任何问题，请通过文章最下面的联系方式联系我。

标签：

相关文章