关注微信订阅号：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的提取封装
到这里如果有任何问题，请通过文章最下面的联系方式联系我。