ionic实战之实现图片列表以及图片浏览

效果展示

图片列表

点击图片，展示大图

左右滑动，切换图片

实现功能

图片列表

应用技术

代码

<div class="row padding">
<div class="col list card" style="height: 30%">
<div class="item item-body">
<img class="img-responsive" style="width:100%; border:1px solid #ffffff;"
ng-src="{{imgUrl+Images[0]}}" ng-click="shouBigImage('{{imgUrl+Images[0]}}',0)">
<p>
清凉夏日
</p>
<p>
<a href="#" class="subdued">1 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
喜欢
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
分享
</a>
</div>
</div>
<div class="col list card" style="height: 30%">
<div class="item item-body">
<img class="img-responsive" style="width:100%; border:1px solid #ffffff;"
ng-src="{{imgUrl+Images[1]}}" ng-click="shouBigImage('{{imgUrl+Images[1]}}',0)">
<p>
清凉夏日
</p>
<p>
<a href="#" class="subdued">1 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
喜欢
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
分享
</a>
</div>
</div>
</div>

点击展示大图&左右滑动

应用技术

实现代码

<div id="rightDisplay" ng-if="bigImage" class="popover-backdrop"
style="position: fixed;top: 0;left: 0;z-index: 10; width: 100%;height: 100%;"
ng-click="hideBigImage()"
on-swipe-left="swipeLeft()"
on-swipe-right="swipeRight()">
<img class="img-responsive"
style="position: absolute;top: 10%;left: 50%;z-index: 10;display: block;margin-top: 18px;
margin-left: -165px;height: 420px;width: 330px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);"
src="{{Url}}"/>
</div>

.controller('IndexCtrl', function ($scope) {
$scope.indexTitle = "图片浏览-IceLemonTea";
$scope.imgUrl = "img/";
$scope.Images = ["1.jpg", "2.jpg", "3.jpg"];
$scope.bigImage = false;    //初始默认大图是隐藏的
$scope.imageIndex = -1;//当前展示的图片
$scope.hideBigImage = function () {
$scope.bigImage = false;
};
//点击图片放大
$scope.shouBigImage = function (imageName, imageIndex) {  //传递一个参数（图片的URl）
$scope.imageIndex = imageIndex;
$scope.Url = imageName;                   //$scope定义一个变量Url，这里会在大图出现后再次点击隐藏大图使用
$scope.bigImage = true;                   //显示大图
};
$scope.swipeLeft = function () {
console.log("$scope.swipeLeft index = ", $scope.imageIndex);
//读取当前的图片index
//图片index+1
if ($scope.imageIndex < $scope.Images.length - 1 && $scope.imageIndex >= 0)
$scope.imageIndex = $scope.imageIndex + 1;
else {
//如果图片已经是最后一张图片了，则取index = 0
$scope.imageIndex = 0;
}
//替换url，展示图片
$scope.Url = $scope.imgUrl + $scope.Images[$scope.imageIndex];                   //$scope定义一个变量Url，这里会在大图出现后再次点击隐藏大图使用
$scope.bigImage = true;                   //显示大图
}
$scope.swipeRight = function () {
console.log("$scope.swipeRight index = ", $scope.imageIndex);
//读取当前的图片index
//图片index-1
if ($scope.imageIndex <= $scope.Images.length - 1 && $scope.imageIndex > 0)
$scope.imageIndex = $scope.imageIndex - 1;
else {
//如果图片已经是第一张图片了，则取index = Images.length-1
$scope.imageIndex = $scope.Images.length - 1;
}
//替换url，展示图片
$scope.Url = $scope.imgUrl + $scope.Images[$scope.imageIndex];                   //$scope定义一个变量Url，这里会在大图出现后再次点击隐藏大图使用
$scope.bigImage = true;                   //显示大图
}
})