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 ...
随机推荐
- You can tell a lot about somebody, looking him in the eye.
You can tell a lot about somebody, looking him in the eye.注视着别人的眼睛,你能读出很多故事.
- Linux的命令提示符 修改
Linux的命令提示符可按个人喜好随意更改,修改PS1的值即可: 在Ubuntu下若只是个别用户下修改~/.profile文件就好,所有用户统一则修改/etc/profile: 加入: export ...
- 怎样配置duilib
duilib是一个免费的界面库,它可利用xml文件自定义界面元素,并且可以在商业项目中无偿使用.怎样在VS中配置duilib界面库呢?请看下面的介绍. 工具/原料 duilib 下载和编译duilib ...
- duilib教程之duilib入门简明教程17.事件处理和消息响应
界面的显示方面就都讲完啦,下面来介绍下控件的响应. 前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEGIN_ME ...
- Linq Lambda 中group by多列后count数量的写法
直接上代码: List<Student> ss = new List<Student>(); Student ss1 = , Age = , Name = " }; ...
- python相关小技巧整理[持续更新]
1. pdb的非常方便的debug,抛弃print吧~ 参考https://www.ibm.com/developerworks/cn/linux/l-cn-pythondebugger/ impor ...
- Maven父子工程配置文件详解
项目骨架搭建成功之后. 因为父工程管理子工程.子工程相当于继承于子工程,所以子工程可以调用父工程里面的东西.那么就可以将jar包对应的配置文件书写到父工程的pom.xml文件中,注意:父工程的打包方式 ...
- 压测：mysqlslap
MySQL从5.1.4版开始带有一个压力测试工具mysqlslap,通过模拟多个并发客户端访问mysql来执行测试,使用起来非常简单,通过mysqlslap –help可以获得可用的选项.这里列一些主 ...
- [记录]Wdinwos scikit-learn 安装
安装的软件有: Python: 3.6.0 numpy-1.11.3+mkl-cp36-cp36m-win_amd64.whl(全名) scipy-0.19.0-cp36-cp36m-win_amd6 ...
- 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等
[前言]在项目的管理功能中,对定时任务的管理有时会很常见.因为我们不能指望只在配置文件中配置好定时任务就行了,因为如果要控制定时任务的 “暂停” 呢?暂停之后又要在某个时间点 “重启” 该定时任务呢? ...