使用Tabs和SlideBox实现左右滑动菜单

1.将tab1.html的代码改为如下:

<ion-view view-title="健康">
  <ion-content class="has-header">
    <ion-slide-box show-pager="false" class="has-header" on-slide-changed="slideChanged($index)">
      <ion-slide ng-repeat="slide in slides">
        <div class="list">
          <a ng-repeat="item in tabs" class="item item-thumbnail-left" href="#">
            <img ng-src="img/TongeBlog.jpg" width="30" height="30" alt="">
            <h2>title:{{slide.name}}</h2>
            <p>description</p>
          </a>
        </div>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
  <ion-tabs 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>

2.service层的Tab1Service

angular.module('starter.services', [])
    .service('Tab1Service', function ($http) {
        this.getClassify = function () {
          return [
            { name: '健康资讯', viewable: true, url: domain + '/info/list', page: 1, rows: 20 },
            { name: '健康知识', viewable: false, url: domain + '/lore/list', page: 1, rows: 20 },
            { name: '健康问答', viewable: false, url: domain + '/ask/list', page: 1, rows: 20 },
            { name: '健康图书', viewable: false, url: domain + '/book/list', page: 1, rows: 20 }
          ]
        }

        this.getList = function (url, page, rows) {
          return $http.post(url, { page: page, rows: rows })
        }
  });

3.完善对应的Tab1Ctrl

.controller('Tab1Ctrl', function ($scope, Tab1Service,  $ionicSlideBoxDelegate, $ionicTabsDelegate) {
    var items = Tab1Service.getClassify()
    $scope.slides = items;
    $scope.tabs = items;

    var slideIndex = 0;

    $scope.slideChanged = function (index) {
        $ionicTabsDelegate._instances[1].select(index);
    };
    $scope.$on('$ionicView.afterEnter', function () {
        $ionicTabsDelegate._instances[1].select($ionicSlideBoxDelegate.currentIndex());
    });

    $scope.selectedTab = function (index) {
        //滑动的索引和速度
        $ionicSlideBoxDelegate.slide(index)
    }

})

4.代码解释

上面菜单部分使用了Tab组建,中间的列表部分使用SlideBox,并不存在任何嵌套,只是在各自选择的时候做一些处理。

  • Tab1Service:使用依赖注入,来调用服务层获取数据。

  • slideChange:slidebox选择的时候将tab对应的索引选中。

  • selectedTab:选中tab的时候,将对应的slidebox选中。

  • ionicView.afterEnter:在页面加载完成的时候默认让tab的第一个项选中。

  • _instances[1]:是因为该项目中用了两个tab,[1]才是取的第二个。

完!

[ionic开源项目教程] - 第3讲 左右滑动菜单的实现(使用Tabs和SlideBox)的更多相关文章

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

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

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

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...

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

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

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

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

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

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

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

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

  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开源项目教程] - 第15讲 ionic用户个人中心登录注册的实现

    第15讲 ionic用户个人中心登录注册的实现 这一讲包括登陆.注册.个人中心.个人资料页面的实现. 在一讲的改动有四个地方: 在config.js里配置接口地址 完善个人中心的服务层(service ...

随机推荐

  1. yum rpm 命令 linux

    centos的软件安装大致可以分为两种类型: [centos]rpm文件安装,使用rpm指令  类似[ubuntu]deb文件安装,使用dpkg指令 [centos]yum安装   类似[ubuntu ...

  2. 服务端发送xml请求java代码示例

    /** * */ package com.autoyol.pay.cmb.core; import java.io.ByteArrayOutputStream; import java.io.IOEx ...

  3. 输入格式--InputFormat和InputSplit

    1)InputFormat的类图: InputFormat 直接子类有三个:DBInputFormat.DelegatingInputFormat和FileInputFormat,分别表示输入文件的来 ...

  4. 如何开发一个自己的 RubyGem?

    「如何测试你的 RubyGem?」的前导文章 什么是 RubyGem RubyGem 是 Ruby 语言的标准源码打包格式. 大家一直都在用gem这个命令,但是很少有人知道这个东西是怎么来的,这里我从 ...

  5. (转)c语言随机数srandom( )

    转自:http://zhidao.baidu.com/question/334364810.html调用随机数函数 rand()() 的时候, 实际得到的这个随机数并不是绝对随机的,它是以一个初始值, ...

  6. [C++]类的继承与派生

    继承性是面向对象程序设计的第二大特性,它允许在既有类的基础上创建新类,新类可以继承既有类的数据成员和成员函数,可以添加自己特有的数据成员和成员函数,还可以对既有类中的成员函数重新定义.利用类的继承和派 ...

  7. 浏览器的CSS各种hack,大汇总

    对着IE久了也有感觉了,在win10出新浏览器以及中国的IE6+用户没有普及新的浏览器前IE还是个坑,所以hack这东西还是要掌握一点的.不废话直接贴图 记得之前在项目里面针对IE6的hack是这样写 ...

  8. mysql 连接数的最大数

    mysql默认最大连接数是100,增加加默认MYSQL连接数的方法有两个 方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini(windows) 或 my.cnf(linux环境)查找 ...

  9. java编译错误:varargs 方法的非 varargs 调用

    转自:http://www.blogjava.net/ideame/archive/2007/03/23/105849.html 警告: 最后一个参数使用了不准确的变量类型的 varargs 方法的非 ...

  10. 如何使用SPY++查找

    自动化测试中,如果需要做UI automation的时候往往需要抓取object的工具.实际上这种工具有很多,认识的大牛使用SPY++,于是我也选择了这个.下面列出基本使用方法.有点像XACC spy ...