手记

未学者(wo)一步一步从ionic2学习到AngularJs(二)

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

  • 实现这步,首先得向tab1.html里面添加内容,修改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/ionic.png" 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>
  • 修改控制tab1.html的控制器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)
    }
})
  • 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 })
        } 
  });

到这一步,我卡住了。。。,无论怎样调试都没有内容加到tab1.html里面。没有任何AngularJs经验的我,一旦卡住,就是毫无头绪。我决定一步一步的排除错误。

  • app入口,没有问题,因为我的导航没有问题,说明angularjs正常加载。
  • app.js路由配置,没有问题,因为目前在路由里面不涉及到tab1.html里面内容的添加。
  • controller.js控制器,没有问题,因为Tab1Ctrl控制器,控制的是里面的内容进行滑动,而内容还没有加载出来。
  • 只剩下services.js了,这个部分也是我最看不懂的。因为在里面定义了一个services的模型(其实我感觉这个也是一个控制器,但是取名叫做services),然后定义了一个数组。但是他的域不是$socpe,而是$http。原来,这个是一个网络数据!(为什么单独把这个控制器拿出来,以后再讨论)
    -再回头看controller.js,$scope域后面Tab1Service使用依赖注入,来调用服务层获取数据。
    -所以这时我们就可以添加一个url,来获取数据了。 增加一个config.js文件
var domain = "http://www.tngou.net/api"
var imgUrl = "http://tnfs.tngou.net/image"
var cache ={
    user :"AppNews"
}
  • 记得在index.html引用
<script src="js/config.js"></script>
  • 这样,我的tab1.html就实现了。详细代码稍后再慢慢学习。 代码解释

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

  • Tab1Service:使用依赖注入,来调用服务层获取数据。
  • slideChange:slidebox选择的时候将tab对应的索引选中。
  • selectedTab:选中tab的时候,将对应的slidebox选中。
  • ionicView.afterEnter:在页面加载完成的时候默认让tab的第一个项选中。
  • _instances1:是因为该项目中用了两个tab,1才是取的第二个。


未完待续。。。

1人推荐
随时随地看视频
慕课网APP