【组件篇】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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

样式问题-如何一次性设置网站英文字体样式,中文字体等样式

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 今天才发现,CSS 的 font-fami...

3176
来自专栏BinarySec

mmap及linux地址空间随机化失效漏洞

Linux下动态库是通过mmap建立起内存和文件的映射关系。其定义如下void* mmap(void* start,size_t length,int prot...

2801
来自专栏生信宝典

CIRCOS圈图绘制 - 最简单绘图和解释

Circos是绘制圈图的神器,在http://circos.ca/images/页面有很多CIRCOS可视化的示例。 ? ? Circos可以在线使用,在线使用...

1.3K9
来自专栏生信宝典

Cytoscape制作带bar图和pie图节点的网络图

本教程旨在告诉大家如何使用cytoscape根据Node信息表格制作带有barplot信息节点的网络图。以安装文件夹下的样例数据为例。

3103
来自专栏Kubernetes

NVIDIA/k8s-device-plugin源码分析

Author: xidianwangtao@gmail.com k8s-device-plugin内部实现原理图 在Kubernetes如何通过Devic...

5658
来自专栏博客园迁移

Adobe Acrobat pro生成PDF模版

最近做了一个关于动态生成PDF合同的需求  java生成PDF 网络上随便一搜遍有了

2503
来自专栏熊二哥

Sublime快速入门

在当前的互联网时代,任何程序语言和相关技术都只是实现互联网应用的一种手段,这也就造成了大量的互联网工程师长期与不同的语言、技术、系统环境、IDE等打交道。因此一...

1985
来自专栏落影的专栏

iOS开发笔记(二)

前言 开发做笔记是好习惯,总结分享是巩固记忆。 遇到问题,思考其背后的原因、原理。 AFNetworking 1、progress回调block,不在主线程;...

3477
来自专栏calvin

Quill编辑器介绍及扩展

从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内...

5192
来自专栏LinXunFeng的专栏

iOS - Swift UISearchController的取消按钮

1242

扫码关注云+社区

领取腾讯云代金券