Ionic 图片预览ion-slide-box，ion-slide，ion-scroll实现

1.index.html 代码

 <body ng-app="starter">

   <ion-pane>

     <ion-header-bar class="bar-stable">

       <h1 class="title">图片预览</h1>

     </ion-header-bar>

     <ion-content class="has-header padding" ng-controller="GalleryCtrl">

       <br><br>

       <div class="item item-divider">

         <i class="ion-images"></i>

        图片库

       </div>

       <a class="item item-list-detail">

         <ion-scroll direction="x">

           <img ng-repeat="image in allImages" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb"/>

         </ion-scroll>

       </a>

     <br/>

       <div class="item item-divider">

         <i class="ion-images"></i>

         图片库

       </div>

       <a class="item item-list-detail">

           <div class="col-24" ng-repeat="image in allImages">

             <img  ng-src="{{image.src}}"  zoom-src="{{image.src}}" zoom-view class="image-list-thumb2"   />

           </div>

       </a>

     </ion-content>

   </ion-pane>

   <script id="gallery-zoomview.html" type="text/ng-template">

     <ion-modal-view >

       <ion-header-bar class="bar-stable">

          <h1 class="title"></h1>

         <div class="buttons">

           <button class="button button-clear button-light icon ion-close-circled close-btn" ng-click="closeModal()"></button>

         </div>

       </ion-header-bar>

       <ion-content >

         <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="activeSlide" show-pager="false">

           <ion-slide ng-repeat="image in allImages">

             <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false" paging="true"

                         zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%"

                         delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)" on-release="updateSlideStatus(activeSlide)">

               <div class="image" >

                 <img  src="{{image.src}}" style="height:{{h}}px; width: 100%;" >

               </div>

             </ion-scroll>

           </ion-slide>

         </ion-slide-box>

       </ion-content>

     </ion-modal-view>

   </script>

   </body>

2、css 代码

 <style type="text/css">

   .image-list-thumb {

     padding: 2px 2px 2px 2px;

     height: 150px;

   }

   .slider {

     width: 100%;

     height: 100%;

   }

   .image {

     width: 100%;

     height: 100%;

     background-size: contain;

     background-repeat: no-repeat;

     background-position: center, center;

   }

   .col-24 {

     padding: 5px;

     border:1px solid #eee;

     margin-bottom: 10px;

     margin-right:1%;

     width: 24%;

     display: block;

     float:left;

   }

   .image-list-thumb2 {

     padding: 2px 2px 2px 2px;

     height: 80px;

     width:98%;

   }

 </style>

3.controller 代码

 .controller('GalleryCtrl', function($scope, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

   $scope.allImages = [{

     src: 'img/adam.jpg'

   }, {

     src: 'img/ben.png'

   }, {

     src: 'img/mike.png'

   }, {

     src: 'img/perry.png'

   }, {

     src: 'img/ben.png'

   }, {

     src: 'img/mike.png'

   }, {

     src: 'img/perry.png'

   } ,{

     src: 'img/max.png'

   }];

   $scope.zoomMin = 1;

   $scope.showImages = function(index) {

     $scope.activeSlide = index;

     $scope.showModal('gallery-zoomview.html');

   };

   $scope.showModal = function(templateUrl) {

     $ionicModal.fromTemplateUrl(templateUrl, {

       scope: $scope

     }).then(function(modal) {

       $scope.modal = modal;

       $scope.modal.show();

     });

   }

   $scope.closeModal = function() {

     $scope.modal.hide();

     $scope.modal.remove()

   };

   $scope.updateSlideStatus = function(slide) {

     var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;

     if (zoomFactor == $scope.zoomMin) {

       $ionicSlideBoxDelegate.enableSlide(true);

     } else {

       $ionicSlideBoxDelegate.enableSlide(false);

     }

   };

   $scope.w = window.innerWidth

     || document.documentElement.clientWidth

     || document.body.clientWidth; //获取屏幕的宽度

   $scope.h=window.innerHeight

   || document.documentElement.clientHeight

   || document.body.clientHeight; //获取屏幕的高度

 });

4.引用js 类库 https://github.com/AlexDisler/ionic-zoom-view

 "use strict";

 (function () {

   "use strict";

   var zoomView = function ($compile, $ionicModal, $ionicPlatform) {

     return {

       restrict: "A",

       link: function link(scope, elem, attr) {

         $ionicPlatform.ready(function () {

           elem.attr("ng-click", "showZoomView()");

           elem.removeAttr("zoom-view");

           $compile(elem)(scope);

           var zoomViewTemplate = "\n          <style>\n          .zoom-view .scroll { height:100%; }\n          </style>\n          <ion-modal-view class=\"zoom-view\">\n          <ion-header-bar>\n          <h1 class=\"title\"></h1>\n          <button ng-click=\"closeZoomView()\" class=\"button button-clear button-dark\">取消</button>\n          </ion-header-bar>\n          <ion-content>\n          <ion-scroll zooming=\"true\" direction=\"xy\" style=\"width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; \">\n          <img ng-src=\"{{ngSrc}}\" style=\"width: 100%!important; height: 98%;  margin: auto; padding: 10px; \"></img>\n          </ion-scroll>\n          </ion-content>\n          </ion-modal-view>\n          ";

           scope.zoomViewModal = $ionicModal.fromTemplate(zoomViewTemplate, {

             scope: scope,

             animation: "slide-in-up" });

           scope.showZoomView = function () {

             scope.zoomViewModal.show();

             scope.ngSrc = attr.zoomSrc;

           };

           scope.closeZoomView = function () {

             scope.zoomViewModal.hide();

           };

         });

       } };

   };

   angular.module("ionic-zoom-view", []).directive("zoomView", zoomView);

 })();

app 里面继承如 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova','ionic-zoom-view'])

5.效果图

巴特西

Ionic 图片预览ion-slide-box，ion-slide，ion-scroll实现

最新文章

热门文章