【2016.09.08】【ionic 滑动框(ViewPager)】

最新推荐文章于 2024-09-21 09:29:16 发布

chengji4739

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/YongfengHe/blog/744220

版权

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">

  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="js/app.js"></script>

  <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
  <script src="cordova.js"></script>
  <script>
    var app = angular.module("myApp",["ionic"]);
    app.run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
          // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
          // for form inputs)
          if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          }
          if(window.StatusBar) {
            StatusBar.styleDefault();
          }
        });
      });

    app.controller('myCtrl01',["$scope","$timeout", function($scope,$timeout) {
      $scope.screenwidth = parseInt(window.screen.width);
      $scope.screenheight = window.screen.height;
      $scope.imageList = [
        "http://www.2liangli.com/uploads/allimg/141108/1-14110R12140136.png",
        "http://upload.chinapet.com/forum/201410/29/145243zrrcz5o6nt3r7cl2.jpg",
        "http://i.epetbar.com/2014-09/28/59e037db78df7a9e2a94ea5e5837032a.jpg",
        "http://t1.niutuku.com/960/10/10-202370.jpg"
      ];
      $scope.myActiveSlide=0;
      $scope.slideHasChanged = function (index) {
        console.log(index);
      };

      $scope.clickPager = function (index) {
        console.log('您点击了第【'+index+'】页');
      }

    }]);

  </script>

</head>
<body ng-controller="myCtrl01" animation="slide-left-right-ios7">
<ion-slide-box active-slide="myActiveSlide" on-slide-changed="slideHasChanged($index)" does-continue="true"
               show-pager="true" auto-play="true" slide-interval="3000" ng-click="clickPager(myActiveSlide)">
  <ion-slide ng-repeat="x in imageList">
    <div style="width:'{{screenwidth}}';height:auto;">
    <img src="{{x}}" style="width:100%;height: 250px;">
    </div>
  </ion-slide>
</ion-slide-box>
</body>
</html>

转载于:https://my.oschina.net/YongfengHe/blog/744220