ionic 轮播组件

2017-07-20 18:07:00
admin
原创
358
<html ng-app="example">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title> </title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
     </head>
  <script type="text/javascript">
    ;
    angular.module('example', ['ionic'])
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      });
    });
  </script>

<script type="text/javascript">
angular.module('example').controller('DefaultController', 
function($scope,$window,$ionicLoading,$timeout) {
  $scope.backHome = function(){
    $window.history.go(-1);
  };
  //获取轮播组件当前页面索引
  $scope.syncIndex = function(index){
    $scope.pictureIndex = index;
  };
});
</script>
<body ng-controller="DefaultController">
  <ion-header-bar class="bar-positive">
    <button class="button button-clear icon ion-ios-arrow-back" ng-click="backHome()"></button>
    <h1 class="title">轮播组件ion-slide-box</h1>
  </ion-header-bar>
  <ion-content>
    <div class="row">
      <div class="col">
        <ion-slide-box auto-play="true" does-continue="true" 
        show-pager="true" on-slide-changed="syncIndex(index)">
          <ion-slide>
            <img src="http://code.ybao.org/demo/ionic/slide/she_1.jpg">
          </ion-slide>
          <ion-slide>
            <img src="http://code.ybao.org/demo/ionic/slide/she_2.jpg">
          </ion-slide>
          <ion-slide>
            <img src="http://code.ybao.org/demo/ionic/slide/she_3.jpg">
          </ion-slide>
          <ion-slide>
            <img src="http://code.ybao.org/demo/ionic/slide/she_4.jpg">
          </ion-slide>
          <ion-slide>
            <img src="http://code.ybao.org/demo/ionic/slide/she_5.jpg">
          </ion-slide>
          <ion-slide>
            <img src="http://code.ybao.org/demo/ionic/slide/she_6.jpg">
          </ion-slide>
          <ion-slide>
            <img src="http://code.ybao.org/demo/ionic/slide/she_7.jpg">
          </ion-slide>        
        </ion-slide-box>
      </div>
    </div>
    当前的专辑图片索引是:{{pictureIndex}}
  </ion-content>
</body>
</html>
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227