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

这段时间没有做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