依賴(lài)
依賴(lài)于：photoswipe箍镜，所以需要先引入：photoswipe.css源祈， default-skin.css， photoswipe.min.js色迂， photoswipe-ui-default.min.js香缺， 再引入angular-photoswipe.min.js
app.module.js
ng.module('app', [ 'ngPhotoswipe']);
html
<!-- 圖片預(yù)覽 -->
<div ng-photoswipe
slide-selector={{vm.photoswipe.dom}}
slides="vm.photoswipe.slides"
open="vm.photoswipe.open"
on-close="vm.photoswipe.closeFn()"
options="vm.photoswipe.opts"></div>
/* 需要點(diǎn)擊預(yù)覽的圖片 */
<div>
<img class="timg" ng-click="vm.photoswipe.showFn($index)" ng-repeat='x in datas' src="{{x.pic}}"/>
</div>
注：1.要放在header,footer同級(jí) 2：slide-selector必須要寫(xiě)個(gè)class名，否則報(bào)錯(cuò)
controller
/**
* 預(yù)覽大圖：photoswipe
* 從服務(wù)器取到的圖片數(shù)據(jù)
*
*/
function photoswipeFn(data){
vm.photoswipe = {
dom: '.timg',
slides: [], //圖片數(shù)組
open: false, //是否顯示
showFn: showFn, //顯示
closeFn: closeFn, //隱藏
opts: {
index: 0
}
};
//預(yù)覽大圖
vm.title = '查看大圖';
//顯示
function showFn(i) {
if(angular.isDefined(i)) {
vm.photoswipe.opts.index = i;
}
vm.photoswipe.open = true;
};
//隱藏
function closeFn() {
vm.photoswipe.open = false;
};
/**
* 格式化圖片列表
* 根據(jù)屏幕尺寸計(jì)算圖片新的的高度（后臺(tái)傳有圖片尺寸）
*/
angular.forEach(data, function(item){
var obj = {
src: item.pic_cover,
w: 500,
h: 500
};
if(item.pic_size){
var arr1 = item.pic_size.split(',');
obj.w = screen.width;
obj.h = obj.w * arr1[1] / arr1[0];
}
vm.photoswipe.slides.push(obj);
})
}
注：1：須要給圖片寬高歇僧， 否則報(bào)錯(cuò) 2：需要給定dom元素的class名
參考資料
注：git上用法不詳細(xì)图张，特此做一篇用法
需求
移動(dòng)端商品詳情頁(yè)需要瀏覽詳情圖
前端環(huán)境
ionic, angular
