`

Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览

阅读更多

打包青春美女图片时,用了下ionic做图片预览的,觉得还可以,就记录了下来:

 

这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能

点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制图片的大小,有点类似汽车之家的图片预览功能

 

 

 

 

 

 

 

 

 

 


iClub theme主要功能

Included ionic plugins
Ionic Filter Bar
Ionic Gallery ()
Ionic Scroll Sista
ion-affix


使用此demo需要的Cordova 插件

ionic-plugin-keyboard
org.apache.cordova.statusbar
org.apache.cordova.splashscreen
cordovaSocialSharing

分享到:
评论

相关推荐

    ionic混合开发app可以双击图片进行图片的放大滑动预览

    在本文中,我们将深入探讨如何使用Ionic框架进行混合移动应用开发,特别关注如何实现双击图片后进行图片的放大和滑动预览功能。Ionic是一个流行的开源框架,它基于Angular,用于构建原生感观的跨平台移动应用。在...

    ionic-cordova-demo-master.zip

    这个压缩包文件名为"ionic-cordova-demo-master.zip",暗示它包含了一个基于Ionic和Cordova框架的演示应用程序的源代码。 Ionic是一款流行的开源框架,用于构建高性能的混合移动应用,而Cordova则是一个移动应用开发...

    Android使用Photoview实现图片左右滑动及缩放功能

    本文将详细介绍如何在Android项目中使用`Photoview`实现图片左右滑动和缩放。 首先,我们需要在项目的`build.gradle`文件中添加必要的依赖。引入`Picasso`库用于图片加载,以及`Photoview`库用于手势处理: ```...

    ionic3官网demo-sidemenu

    【标题】"Ionic3官网Demo-Sidemenu"是一个基于 Ionic 框架的侧滑菜单示例项目,主要用于展示如何在 Ionic3 应用中实现侧滑菜单功能。这个项目是为了解决在国内下载 Ionic3 资源时可能遇到的网络问题,提供了一个已经...

    ionic3官网demo-super

    【标题】"Ionic3官网Demo-Super"是一个包含 Ionic3 框架官方示例项目的压缩包,旨在解决国内用户在下载 Ionic3 资源时可能出现的问题。这个压缩包提供了一个完整的、预下载的“super”项目,它是 Ionic3 官方教程中...

    ionic3官网demo-blank

    本压缩包"ionic3官网demo-blank"提供了一个基础的Ionic 3项目模板,帮助开发者在遇到国内下载问题时快速入手。 在 Ionic 3 中,`blank`模板是最基本的应用结构,它包含了启动项目所需的所有核心文件和配置。当你...

    ionic3官网demo-tutorial

    Ionic 3 是一个基于 AngularJS 的开源框架,用于构建高度可定制的、跨平台的移动应用。它利用 Web 技术(HTML、CSS 和 JavaScript)来创建原生 iOS 和 Android 应用,同时支持 Progressive Web App。通过 Ionic 3,...

    ionic3官网demo-tabs

    【标题】"Ionic3官网Demo-Tabs" 这篇文章将深入探讨基于Ionic3框架的Tab导航组件的使用和实现,这是移动应用开发中常见的功能模块。Ionic3是一款强大的混合移动应用开发框架,它允许开发者使用Web技术(如HTML、CSS...

    ionic2 new demo

    本文将深入探讨基于`Ionic2`框架开发的Android应用示例,该示例被称为"Ionic2 new demo"。这个项目旨在帮助开发者快速掌握`Ionic2`框架,了解如何利用其特性构建功能丰富的移动应用程序,特别是涉及到下拉框...

    Angular-ionic-native-http-connection-backend.zip

    Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...

    ionic高仿微信选择图片demo

    这个"ionic高仿微信选择图片demo"项目旨在实现类似微信应用中的图片浏览功能,包括缩略图显示、大图查看以及图片的放大和缩小操作。我们将讨论涉及到的关键技术点和实现步骤。 首先,让我们了解Ionic 3。Ionic 3是...

    ionic-datepicker-oysq

    "ionic-datepicker-oysq"是一个专为Ionic框架设计的日期选择器插件,它使得在Ionic应用中集成日期选择功能变得更加简单和高效。 Ionic是一款基于AngularJS的开源框架,用于构建跨平台的混合移动应用。它提供了丰富...

    EXPERT-Building-Mobile-Apps-with-Ionic-2

    - **运行应用**:通过`ionic serve`或`ionic run`命令在浏览器或设备上预览应用。 - **更新应用**:随着Ionic版本的更新,可能需要更新项目依赖以保持兼容性。 #### 项目结构与CLI命令 - **重要文件与文件夹**:...

    ngx-ionic-image-viewer:一个Ionic 4 Angular组件,用于查看和缩放图像和照片,而无需任何其他依赖项

    ngx-ionic-image-viewer 一个Ionic 4 Angular模块,用于查看和缩放图像和照片,而无需任何其他依赖项。演示版|总览先决条件离子> = 4.0.0 角度> = 8.0.0安装npm install --save ngx-ionic-image-viewer用法进口导入...

    ionic2微软官方查看天气demo

    【标题】"Ionic2微软官方查看天气Demo"是一款基于Ionic2框架开发的移动应用示例,主要用于展示如何在iOS和Android平台上构建一个实时查询天气的应用。这个Demo是微软官方提供的,意味着它遵循了最佳实践,并且经过了...

    ionic的15个demo和一个真实项目

    7. **demo11**:离子滑块和图片轮播,展示了如何在应用中添加图片或内容的滑动展示功能。 8. **demo12**:下拉刷新,展示了如何实现在内容顶部下拉刷新数据的功能,通常用于更新列表信息。 9. **demo13**:模态...

    ionic 拍照,从照片中选择 ,预览全都包括

    npm install --save @ionic-native/camera ``` **2. 声明Camera模块** 在`app.module.ts`文件中,需要导入并声明Camera模块: ```typescript import { Camera } from '@ionic-native/camera'; @NgModule({ ... ...

    ionic3入门级demo

    在压缩包“ionic-getting-master”中,我们可以看到一个典型的Ionic 3项目结构。主要包括以下几个部分: 1. `app.module.ts`:这是应用的主模块,导入并配置了必要的依赖,如Ionic Angular模块,以及自定义的服务和...

    Ionic2创建App启动页左右滑动欢迎界面

    import { Component, NavController } from 'ionic-angular'; import { HomePage } from '../home/home'; @Component({ templateUrl: 'welcome.html' }) export class WelcomePage { constructor(public ...

    ionic-googlemaps-quickdemo-v4

    @ ionic-native / google-maps @ 5.0.xxx演示 该演示应用程序旨在描述如何在Ionic v4中使用@ionic-native/google-maps 。 在使用此演示之前... 请用您的API密钥替换config.xml和package.json文件中的(API key) 。 ...

Global site tag (gtag.js) - Google Analytics