关注微信订阅号: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的提取封装的更多相关文章

  1. [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...

  2. [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  3. [ionic开源项目教程] - 第9讲 新闻详情页的实现

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  4. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

  5. [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)

    [ionic开源项目教程] - 第8讲  根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...

  6. [ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP

    前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 关注订阅号:TongeBlog ,查看移动端跨平台 ...

  7. [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...

  8. [ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图

    新建项目 由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...

  9. [ionic开源项目教程] - 第4讲 通Service层获取数据列表

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

随机推荐

  1. WPF 详解模板

    在WPF中有三大模板 ControlTemplate,ItemsPanelTemplate,DataTemplate.其中ControlTemplate和 ItemsPanelTemplate是控件模 ...

  2. 移动端页面调试工具——UC浏览器开发者版

    在移动页面的开发中,我们很难像PC端那样很方便的调试,网上也有各种各样的调试方式.但在工作中,我主要还是用chorme自带的模拟器来模拟各种移动设备,但是用久了之后发现毕竟是模拟的,与真机调试还是会有 ...

  3. spring 两个 properties

    A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块的Spring配置文件如下: <?xml version="1.0" enc ...

  4. Javascript与Flash通信全解析

    原文:https://www.imququ.com/post/39.html Flash已经提供了ExternalInterface接口与JavaScript通信,ExternalInterface有 ...

  5. 服务接口API限流 Rate Limit

    一.场景描述 很多做服务接口的人或多或少的遇到这样的场景,由于业务应用系统的负载能力有限,为了防止非预期的请求对系统压力过大而拖垮业务应用系统. 也就是面对大流量时,如何进行流量控制? 服务接口的流量 ...

  6. iOS警告-Warning: Error creating LLDB target at path(模拟器警告)

    Warning: Error creating LLDB target at path '/Users/apple/Library/Developer/Xcode/DerivedData/Observ ...

  7. ExtJs之Ext.core.DomQuery

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  8. CDOJ 1259 昊昊爱运动 II 线段树+bitset

    昊昊爱运动 II 昊昊喜欢运动 他N天内会参加M种运动(每种运动用一个[1,m]的整数表示) 现在有Q个操作,操作描述如下 昊昊把第l天到第r天的运动全部换成了x(x∈[1,m]) 问昊昊第l天到第r ...

  9. 内存就是RAM?

    内存不全是RAM,让我们看看当今的Intel计算机是如何连接各个组件的吧.下图展示了主板上的主要组件: 现代主板的示意图,北桥和南桥构成了芯片组. 当你看图时,请牢记一个至关重要的事实:CPU一点也不 ...

  10. Android基础之Activity launchMode详解

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! Activity的lauchmode,是基础的属性,但也是App优化必须掌握的知识,它约束了Acti ...