IONIC中slides的使用(图片显示及其删除)

先看效果（本来想上传一段视频，但好像CSDN不支持视频格式文件的上传，可以上传gif动态图）

html


<ion-content><ion-slides pager><ion-slide *ngFor="let img of images;let i=index"><ion-toolbar class="tolbar-layout">                  <ion-buttons center>        <button ion-button color="primary">{{img.Name}}</button></ion-buttons></ion-toolbar> <img src="{{img.src}}" (press)="ImgPress()" /></ion-slide></ion-slides>
</ion-content>

css

  .tolbar-layout{min-height: 45px;position: absolute;opacity: 0.6;}.slide-zoom{height: 100%;img {min-height: 100%;}}

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides, AlertController } from 'ionic-angular';@Component({selector: 'page-contact',templateUrl: 'contact.html'
})export class ContactPage {@ViewChild(Slides) componentSlides: Slides;images: any = [];constructor(public navCtrl: NavController,public alertCtrl: AlertController) {this.images = [{ src: 'assets/imgs/landscape/space1.jpg', Name: 'space1' },{ src: 'assets/imgs/landscape/space2.jpg', Name: 'space2' },{ src: 'assets/imgs/landscape/space3.jpg', Name: 'space3' },{ src: 'assets/imgs/landscape/space4.jpg', Name: 'space4' },{ src: 'assets/imgs/landscape/space5.jpg', Name: 'space5' },{ src: 'assets/imgs/landscape/space6.jpg', Name: 'space6' },{ src: 'assets/imgs/landscape/space7.jpg', Name: 'space7' }];}//长按删除图片ImgPress() {let alert = this.alertCtrl.create({message: "确认删除吗？",buttons: [{text: '取消',role: 'cancel'}, {text: '确定',handler: () => {this.DeleteImg();}}]})alert.present();}//删除图片DeleteImg() {var id;var index = this.componentSlides.getActiveIndex();if (index < this.images.length) {id = this.images[index].id;} else {id = this.images[index - 1].id;}for (var i = 0; i < this.images.length; i++) {if (this.images[i].id == id) {this.images.splice(i, 1);//如果删除的是最后一张图片，删除完后直接跳转到上一张图片if (i + 1 === this.componentSlides.length()) {this.componentSlides.slideTo(i - 1);}break;}}//判断图片删除完后，是否还有图片，如果没有，则退出if (this.images.length == 0) {this.navCtrl.pop();}}}

IONIC中slides的使用(图片显示及其删除)相关推荐

vue js中解决二进制转图片显示问题
一:问题工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示: ...
PyQt5中的QtGui.QImage图片显示问题分析
前言 PyQt是Python语言环境的GUI编程解决方案之一,另外还有PyGTK.wxPython等也较为常用.PyQt作为Qt语言的Python扩展,可以用来方便快速的开发界面应用. PyQt5中的 ...
oracle 图片显示不出,Sql Server 中image类型迁移到Oracle 中Blob类型出现图片显示不出来，why????请博客们帮忙 | 学步园...
我现在在一项目中碰到这么一个问题 Sql Server 中image类型迁移到Oracle Blob类型出现图片显示不出来,我在Sql Server 中看了一条image数据如下: 1.Sql Se ...
php mssql image,php5连接mssql2005数据库表中的image字段图片显示
语言是php5 数据库是mssql2005 一个表中的字段[nr]存储图片,类型是image类型的现在想实现 1)判断字段内容nr里的内容是图片,还是html页面,还是pdf文件 2)类型判断没有存 ...
html src 图片不显示图片,css中不用src也让图片显示的方法是什么？
在网页中有两种调用图片的方法,分别是使用img标签和使用background-image属性引入图片,其中使用img标签引入图片需要使用src属性. css中不用src让图片显示的方法是使用backg ...
Android中怎么使图片显示
android中经常到利用图片,利用图片时我们都是把图片放在drawable-xxx目录下,因为这里就是存储图片的地方,xxx不用理他,就是关于分辨率而已. 楼主在学习android的时候一直尝试把图 ...
如何在python中显示电脑中的图片-python如何实现多个图片显示在屏幕上？
pygame的三个方法(屏幕上显示需要的图片) yuhu102319582018-12-16 python将多幅图片显示在一张图片上 wugui1111116282018-06-15 iOS 图片显示 ...
TF之CNN：利用sklearn(自带手写数字图片识别数据集)使用dropout解决学习中overfitting的问题+Tensorboard显示变化曲线
TF之CNN:利用sklearn(自带手写数字图片识别数据集)使用dropout解决学习中overfitting的问题+Tensorboard显示变化曲线目录输出结果设计代码输出结果设计代码 ...
axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...

IONIC中slides的使用(图片显示及其删除)

IONIC中slides的使用(图片显示及其删除)相关推荐

最新文章

热门文章