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 ...
随机推荐
- day21 生成器，列表解析，三元表达式
Python之路,Day9 = Python基础9 判断可迭代对象和迭代器 from collections import Iterable, Iterator # 导入模块功能,用来判断对象是否为I ...
- thinkphp 比较标签
比较标签用于简单的变量比较,复杂的判断条件可以用if标签替换,比较标签是一组标签的集合,基本上用法都一致,如下: <比较标签 name="变量" value="值& ...
- myeclipse CTRL+1功能
有时候,在myeclipse或者eclipse中自动编译代码有错误,我们把鼠标放在错误一行能够自动显示出问题原因,但是有时显示问题让人有些匪夷所思,不知所云何物. 此时可以使用<ctrl> ...
- 标记excel中输入的重复数据
首先选中需要标记重复的数据列 开始 -> 条件格式 -> 突出显示单元格规则 -> 重复值 选择相应的颜色即可 效果如下:
- NEO4J全文检索架构
NEO4J全文检索架构 一.有大量存量数据(亿级以上)(并长期有增量数据进入) 二.无大量存量数据或者少量存量数据(或全部为增量数据) 三.架构方案选择优先级 以下方案,是根据实践总结的基于NEO4J ...
- 自己新机器安装CM时候 server服务启动DB配置
com.cloudera.cmf.db.type=mysqlcom.cloudera.cmf.db.host=localhost:3306com.cloudera.cmf.db.name=cmfcom ...
- UMP系统功能 读写分离
- (转)linux centos 编译luabind-0.9.1 动态库 静态库
编译时:virtual memory exhausted: Cannot allocate memory 一.问题 当安装虚拟机时系统时没有设置swap大小或设置内存太小,编译程序会出现virtual ...
- html--div里让图片水平居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- odoo 在更多下面直接调用方法
<record id="action_get_qc_result" model="ir.actions.server"> <field nam ...