ionic2 图片预览
来源:互联网 发布:cms建站系统教程 编辑:程序博客网 时间:2024/06/06 03:27
1. 插件安装
github地址:https://github.com/nikini/ionic-gallery-modal
安装:
npm install ionic-gallery-modal --save
2.插件引入(这个插件在页面的module.ts中引入会报错)
app.modules.ts
import * as ionicGalleryModal from 'ionic-gallery-modal';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
imports: [
ionicGalleryModal.GalleryModalModule,
...
],
providers: [
...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: ionicGalleryModal.GalleryModalHammerConfig,
},
...
]
3.插件使用
需要使用的pages的html:
<p (click)="openModal(image)" *ngIf="image">
<img src="{{image }}">
</p>
ts:
import { ModalController } from 'ionic-angular';
import { GalleryModal } from 'ionic-gallery-modal';
// 这个插件 要求 图片数组是以下形式的, 所以需要一个转换
private photos:any[] = [];
imageArray: any[]= [
'/assets/to-user.jpg',
'/assets/user.jpg',
'/assets/yuyin.png'
];
constructor(privatemodalCtrl:ModalController,
....,) {
// Get the navParams toUserId parameter
}
// 把图片数组转换成插件需要的数组
changeArrayToGallery(array) {
for (let i= 0; i < array.length; i++) {
var object = { "url": array[i]};
this.photos.push(object);
}
}
// js通过元素 获取在数组中的下标位置
getIndexOfArray (object) {
var index = this.imageArray.indexOf('/assets/yuyin.png');
return index;
}
openModal(image) {
// 获取当前点击图片所在数组下标
var index = this.getIndexOfArray(image);
// 图片数组转换成插件需要的数组
this.changeArrayToGallery(this.imageArray);
// 显示图片预览
let modal = this.modalCtrl.create(GalleryModal, {
photos: this.photos,
initialSlide: index,
});
modal.present();
}
阅读全文
0 0
- ionic2 图片预览
- Ionic2 为Toast加上图片
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- 预览图片
- 图片预览
- 预览图片
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- //图片预览
- 图片预览
- 水塘抽样 Reservoir sampling
- oracle11.2 redo blocksize
- 大数据技术复习常见问题
- 网线八根排列顺序
- 数据库的发展史
- ionic2 图片预览
- java实现微信企业付款到个人
- Verilog 捕捉上升沿下降沿
- vim --入门操作
- Java设计模式之单例模式
- windows上cmake与nmake的搭配用法
- Spring之ORM(spring 与mybatis的4种整合实例)
- datatables 行内修改
- iOS本地数据搜索