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