Ionic 图片预览ion-slide-box，ion-slide，ion-scroll实现

1.index.html 代码

 <body ng-app="starter">

   <ion-pane>

     <ion-header-bar class="bar-stable">

       <h1 class="title">图片预览</h1>

     </ion-header-bar>

     <ion-content class="has-header padding" ng-controller="GalleryCtrl">

       <br><br>

       <div class="item item-divider">

         <i class="ion-images"></i>

        图片库

       </div>

       <a class="item item-list-detail">

         <ion-scroll direction="x">

           <img ng-repeat="image in allImages" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb"/>

         </ion-scroll>

       </a>

     <br/>

       <div class="item item-divider">

         <i class="ion-images"></i>

         图片库

       </div>

       <a class="item item-list-detail">

           <div class="col-24" ng-repeat="image in allImages">

             <img  ng-src="{{image.src}}"  zoom-src="{{image.src}}" zoom-view class="image-list-thumb2"   />

           </div>

       </a>

     </ion-content>

   </ion-pane>

   <script id="gallery-zoomview.html" type="text/ng-template">

     <ion-modal-view >

       <ion-header-bar class="bar-stable">

          <h1 class="title"></h1>

         <div class="buttons">

           <button class="button button-clear button-light icon ion-close-circled close-btn" ng-click="closeModal()"></button>

         </div>

       </ion-header-bar>

       <ion-content >

         <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="activeSlide" show-pager="false">

           <ion-slide ng-repeat="image in allImages">

             <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false" paging="true"

                         zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%"

                         delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)" on-release="updateSlideStatus(activeSlide)">

               <div class="image" >

                 <img  src="{{image.src}}" style="height:{{h}}px; width: 100%;" >

               </div>

             </ion-scroll>

           </ion-slide>

         </ion-slide-box>

       </ion-content>

     </ion-modal-view>

   </script>

   </body>

2、css 代码

 <style type="text/css">

   .image-list-thumb {

     padding: 2px 2px 2px 2px;

     height: 150px;

   }

   .slider {

     width: 100%;

     height: 100%;

   }

   .image {

     width: 100%;

     height: 100%;

     background-size: contain;

     background-repeat: no-repeat;

     background-position: center, center;

   }

   .col-24 {

     padding: 5px;

     border:1px solid #eee;

     margin-bottom: 10px;

     margin-right:1%;

     width: 24%;

     display: block;

     float:left;

   }

   .image-list-thumb2 {

     padding: 2px 2px 2px 2px;

     height: 80px;

     width:98%;

   }

 </style>

3.controller 代码

 .controller('GalleryCtrl', function($scope, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

   $scope.allImages = [{

     src: 'img/adam.jpg'

   }, {

     src: 'img/ben.png'

   }, {

     src: 'img/mike.png'

   }, {

     src: 'img/perry.png'

   }, {

     src: 'img/ben.png'

   }, {

     src: 'img/mike.png'

   }, {

     src: 'img/perry.png'

   } ,{

     src: 'img/max.png'

   }];

   $scope.zoomMin = 1;

   $scope.showImages = function(index) {

     $scope.activeSlide = index;

     $scope.showModal('gallery-zoomview.html');

   };

   $scope.showModal = function(templateUrl) {

     $ionicModal.fromTemplateUrl(templateUrl, {

       scope: $scope

     }).then(function(modal) {

       $scope.modal = modal;

       $scope.modal.show();

     });

   }

   $scope.closeModal = function() {

     $scope.modal.hide();

     $scope.modal.remove()

   };

   $scope.updateSlideStatus = function(slide) {

     var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;

     if (zoomFactor == $scope.zoomMin) {

       $ionicSlideBoxDelegate.enableSlide(true);

     } else {

       $ionicSlideBoxDelegate.enableSlide(false);

     }

   };

   $scope.w = window.innerWidth

     || document.documentElement.clientWidth

     || document.body.clientWidth; //获取屏幕的宽度

   $scope.h=window.innerHeight

   || document.documentElement.clientHeight

   || document.body.clientHeight; //获取屏幕的高度

 });

4.引用js 类库 https://github.com/AlexDisler/ionic-zoom-view

 "use strict";

 (function () {

   "use strict";

   var zoomView = function ($compile, $ionicModal, $ionicPlatform) {

     return {

       restrict: "A",

       link: function link(scope, elem, attr) {

         $ionicPlatform.ready(function () {

           elem.attr("ng-click", "showZoomView()");

           elem.removeAttr("zoom-view");

           $compile(elem)(scope);

           var zoomViewTemplate = "\n          <style>\n          .zoom-view .scroll { height:100%; }\n          </style>\n          <ion-modal-view class=\"zoom-view\">\n          <ion-header-bar>\n          <h1 class=\"title\"></h1>\n          <button ng-click=\"closeZoomView()\" class=\"button button-clear button-dark\">取消</button>\n          </ion-header-bar>\n          <ion-content>\n          <ion-scroll zooming=\"true\" direction=\"xy\" style=\"width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; \">\n          <img ng-src=\"{{ngSrc}}\" style=\"width: 100%!important; height: 98%;  margin: auto; padding: 10px; \"></img>\n          </ion-scroll>\n          </ion-content>\n          </ion-modal-view>\n          ";

           scope.zoomViewModal = $ionicModal.fromTemplate(zoomViewTemplate, {

             scope: scope,

             animation: "slide-in-up" });

           scope.showZoomView = function () {

             scope.zoomViewModal.show();

             scope.ngSrc = attr.zoomSrc;

           };

           scope.closeZoomView = function () {

             scope.zoomViewModal.hide();

           };

         });

       } };

   };

   angular.module("ionic-zoom-view", []).directive("zoomView", zoomView);

 })();

app 里面继承如 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova','ionic-zoom-view'])

5.效果图

Ionic 图片预览ion-slide-box，ion-slide，ion-scroll实现的更多相关文章

Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览
这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
使用saltui实现图片预览查看
项目是基于dingyou-dingtalk-mobile脚手架的一个微应用,这个脚手架使用的UI是antd-mobile,它提供了一个图片上传的组件,但是未提供图片预览的组件,在网上找了不少如何在re ...
JS魔法堂之实战：纯前端的图片预览
一.前言图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
普通图片预览及demo（非分块）
演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...
MVC 图片预览
1.页面cshtml <form name="frmInput" id="frmInput" method="post" action ...
js 图片预览
图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

随机推荐

luoguP1154 奶牛分厩 [数论]
题目描述农夫约翰有N(1<=N<=5000)头奶牛,每头奶牛都有一个唯一的不同于其它奶牛的编号Si,所有的奶牛都睡在一个有K个厩的谷仓中,厩的编号为0到K-1.每头奶牛都知道自己该睡在哪 ...
MySQL高可用(Galera Cluster)
Galera Cluster简介 Galera Cluster是集成了Galera插件的MySQL集群,是一种新型的,数据不共享的,高度冗余的高可用方案,目前Galera Cluster有两个版本,分 ...
SpringBoot_05_ssm拦截器和默认欢迎页面的设置
1.在springBoot下通过使用拦截器完成在没有登陆的前提下,不允许访问其他资源编写拦截器,要实现HandlerInterceptor @Component public class UserI ...
新金融ABS如何做？听听这几十家券商、互金高管的经验之谈
新金融ABS如何做?听听这几十家券商.互金高管的经验之谈 2016-11-24 零壹财经 ID:36104743 时间:2016年11月初地点:北京东城区南湾子3号院(场地提供方:无讼.天同律师事务 ...
System.Object.cs
ylbtech-System.Object.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5619 ...
hive 总结二
本文参考:黑泽君相关博客本文是我总结日常工作中遇到的坑,结合黑泽君相关博客,选取.补充了部分内容. 查询函数(Hive高级) NVL(cloumn,replace_with) 如果cloumn为NU ...
Bzoj 1036 树的统计分类： ACM TYPE 2014-12-29 18:55 72人阅读评论(0) 收藏
Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...
第四周——重新clone项目后maven问题
重新clone项目后,一直报错,"类重复..." clean后install也无效果. 原因是idea在重启项目时会更改maven为默认的idea自带的maven配置,要重新设置
DNS配置-BIND安装配置全过程
下载地址:ftp://ftp.isc.org/isc/ 下载bind,我下载的是bind-9.11.13.tar.gz 我下载的文件放在/root目录下进入目录解压缩 [root@localhost ...
selenium学习笔记——driver.get(url) 页面加载时间太长
# 两个同时设置才行 # 实现效果:加载状态停止,进行代码下一步操作 driver.set_page_load_timeout(10) driver.set_script_timeout(10) # ...

Ionic 图片预览ion-slide-box，ion-slide，ion-scroll实现

Ionic 图片预览ion-slide-box，ion-slide，ion-scroll实现的更多相关文章

随机推荐

热门专题