這段時間沒有做ionic相關的事，但看到群里有人問這個，寫一下。

我在一篇文章【組件篇】ionic3開源組件提到過圖像預覽組件，可以看里面的源碼，也可以看下面內容。

思路

首先，這種圖像滑動縮放的一般是個整體頁面，可以是普通的page，也可以用modal來彈出，為支持這兩種方式也適用于懶加載，所以建議不做成組件，而是做成懶加載頁面。

其次，實現這個功能其實也是很簡單的，正常這個功能用ionic自帶的slides即可，它有zoom屬性，不過我那時用有bug，所以也是拿萬能的swiper來代替，所以先在index.html里添加：

<link href="assets/libs/swiper/swiper.min.css" rel="stylesheet">
<script src="assets/libs/swiper/swiper.min.js"></script>

然后是頁面模塊，直接上代碼，老代碼了，將就著看。

image-viewer.html：

<!-- Generated template for the ImageViewerComponent component -->
<ion-header>
    <ion-navbar>
         <ion-title>索引：{{vm.selectedIndex + 1}}/{{vm.images.length}}</ion-title>
         <ion-buttons start>
             <button ion-button (click)="onDismiss()">確定選擇({{vm.selectedCount}})</button>
         </ion-buttons>
         <ion-buttons end *ngIf="vm.canEdit">
             <button ion-button icon-only (click)="onCheckChanged()">
               <ion-icon name="{{vm.images.length>0 && vm.images[vm.selectedIndex].isChecked ? 'ios-checkmark-circle' : 'ios-radio-button-off'}}"></ion-icon>
              </button>
         </ion-buttons>
     </ion-navbar>
 </ion-header>
 
 <ion-content>
   <div #panel class="swiper-container">
     <div class="swiper-wrapper">
       <div class="swiper-slide" *ngFor="let image of vm.images">
         <div class="swiper-zoom-container">
           <img data-src="{{image?.originPath}}" class="swiper-lazy">
         </div>
       </div>
     </div>
     <div class="swiper-pagination"></div>
   </div>
 </ion-content>

image-viewer.scss：不需要；
image-viewer.ts：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, AlertController } from 'ionic-angular';

declare let Swiper: any;

interface IInput{
  canEdit: boolean,   //能否編輯
  selectedIndex: number,    //默認選擇項索引
  images: any[],
  selectedCount?: number    //選中總數
}

@IonicPage()
@Component({
  selector: 'page-image-viewer',
  templateUrl: 'image-viewer.html',
})
export class ImageViewerPage {

  @ViewChild('panel') panel: ElementRef;
  swiper: any;
  vm: any = {
    canEdit: false,
    selectedIndex: 0,
    images: [],
    selectedCount: 0
  }
  constructor(public viewCtrl: ViewController, public navParams: NavParams, private alertCtrl: AlertController) {
    let inputParams: IInput = navParams.data;
    inputParams.images = inputParams.images.map(item => {
      item.isChecked = true;
      return item;
    });
    inputParams.selectedCount = inputParams.images.length;
    this.vm = inputParams;
  }

  ionViewDidLoad() {
    //http://www.swiper.com.cn/api/index.html
    this.swiper = new Swiper(this.panel.nativeElement, {
      initialSlide: this.vm.selectedIndex,//初始化顯示第幾個
      zoom: true,//雙擊,手勢縮放
      loop: false,//循環切換
      lazyLoading: true,//延遲加載
      lazyLoadingOnTransitionStart: true,//    lazyLoadingInPrevNext : true,
      pagination: '.swiper-pagination',//分頁器
      paginationType: 'fraction',//分頁器類型
      on:{
        slideChange: ()=>{
          if(this.swiper){
            let activeIndex = this.swiper.activeIndex;
            if(activeIndex < this.vm.images.length && activeIndex >= 0){
              this.vm.selectedIndex =  activeIndex;
            }
          }
        }
      }
    })
  }

  onDismiss(){
    let data = this.vm.images.filter(item => item.isChecked);
    this.viewCtrl.dismiss(data);
  }

  onCheckChanged(){
    let item = this.vm.images[this.vm.selectedIndex];
    item.isChecked = !item.isChecked;
    if(item.isChecked){
      this.vm.selectedCount ++;
    }else{
      this.vm.selectedCount --;
    }
  }
}

說明：初始化swiper時就設定了可縮放功能，其它功能是利用slideChange事件變更當前選中的索引，每個圖像關聯仿checkbox的按鈕（直接用checkbox也行）來控制返回的圖像列表。

最終效果如圖：

image.png