【组件篇】ionic3图像手指缩放滑动预览

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

<!-- 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>

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 --;
    }
  }
}