ionic3 图片(轮播)预览 ionic-gallary-modal组件使用方法
一、效果展示
使用方法:
1、npm安装ionic-gallary-modal扩展模块
npm install ionic-gallery-modal --save
2、在app.module.ts根模块中导入图片预览模块 ionic-gallary-modal 和 浏览器手势事件模块 HAMMER_GESTURE_CONFIG
import * as ionicGalleryModal from 'ionic-gallery-modal';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
@NgModule({
declarations: [
MyApp
],
imports: [
......
BrowserModule,
ionicGalleryModal.GalleryModalModule,
.....
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
......
{
provide: HAMMER_GESTURE_CONFIG,
useClass: ionicGalleryModal.GalleryModalHammerConfig,
}
]
})
3、在实例页面(组件)中配置封装调用方法:
根据具体需求可将下面代码封装在Common.ts公共服务库中,以便随时调用即可
import { ModalController } from 'ionic-angular';
import { GalleryModal } from 'ionic-gallery-modal';
/**
* (单图)多图预览model组件封装
* @param photoData 输入图片地址
* @param {string} key 对象图片url对应的属性名程
*/
public photoViews(photoData,key = ''){
let photos:Array<object> = [];
let obj = {};
// 单张图片时(photoData为一个图片地址字符串且不为空)
if(photoData && typeof(photoData) == "string"){
obj = {};
obj['url'] = photoData;
photos.push(obj);
}
console.log(photoData) // 多张图片时(photoData为图片地址字符串数组)
if(photoData instanceof Array){
console.log(photoData)
photoData.forEach(function(item,index,array){
obj = {};
// photoData 为字符串数组时(即key不存在时)
if(key == '' && item){
obj['url'] = item;
photos.push(obj);
}
// photoData 为对象数组时(即key存在时)
console.log(item[key])
if(key != '' && item[key]){
obj['url'] = item[key];
photos.push(obj);
}
});
}
let modal = this.modalCtrl.create(GalleryModal, {
photos: photos,
initialSlide: 0
});
modal.present();
}
4、实际调用:
import {CommonProvider} from "../../providers/common";
constructor(public navCtrl: NavController,
public Common:CommonProvider) {
}
/**
* 图片预览调用
* @param photoData 输入预览图片数据
* @param key 图片url对应的属性名
*/
public viewPhoto(photoData,key){ this.Common.photoViews(photoData,key); }
ionic3 图片(轮播)预览 ionic-gallary-modal组件使用方法的更多相关文章
- 基于ionic框架封装一个图片轮播指令的几点
在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...
- 一、ionic 图片轮播问题
使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题 1.如何解决图片加载不出来的问题 i ...
- H5如何做手机app(移动Web App)?图片轮播?ionic、MUI
移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...
- ionic 图片轮播问题
1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSl ...
- ionic 图片轮播ion-slide-box问题
1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSl ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
- jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
随机推荐
- matploylib之热力图
刚学我也不熟,做个笔记吧 # coding:utf-8 import numpy as np import matplotlib.pyplot as plt dx = 0.01 dy = 0.01 # ...
- crontab+selenium不能定时执行测试的原因
上一篇我提到用无界面selenium实现网页的自动签到.本来测试好好 的没问题,但是加进crontab定时任务却一点动静页没有,后来发现是浏览器的显示问题,自动任务要这样写: 12 3 * * * e ...
- Python 第三天学习整理2
一.常用的字符串方法 capitalize() #将字符串首字母大写 center(100,'*') #把字符串居中的 count(‘zhou’)#查询次数 endswith('.jpg ')#判断字 ...
- 有趣的taskset命令,使进程再指定CPU上运行
前言 taskset命令,用于进程的CPU调优,可以把某进程,指定再某CPU内工作. 如还不明白,可以参考此文 http://www.361way.com/linux-context-switch/5 ...
- ivew-admin 导入excel
1.使用上传组件 <Upload ref="upload" name="importData" action="/api/device/impo ...
- CascadeCNN人脸检测结构
模型的结构大致由图可以完整展现,三个分类是否人脸的12.24.48net,再加上三个用于修正预测框的分类网络: 这三个分类是否人脸的网络,结构逐渐变复杂, 由上图可以看出,前2阶的网络都非常简单,只有 ...
- js 对象属性和使用方法学习笔记
对象的引用 在ECMAScriipt中,不能访问对象的物理表示,只能访问对象的引用.每次创建对象,存储在变量中的都是对象的引用,而不是对象本身. 对象的废除 ECMASript拥有无用存储单元收集程序 ...
- 虚拟机(JVM)如何加载类
首先JVM加载类的一般流程分三步: 加载 链接 初始化 那么是否全部Java类都是这样三步走的方式加载呢?我们可以从Java的数据类型去出发.Java分基本类型和引用类型.其中按照面向对象的特性,一切 ...
- 【leetcode】945. Minimum Increment to Make Array Unique
题目如下: Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. ...
- Halo(三)
接口中可以定义方法 1. 定义静态方法(直接调用) public interface Test { public static void method() { /** * 1.定义一个静态的带有方法体 ...