所有文章，首发于CSDN-柠檬加冰博客
原文链接地址
效果展示
图片列表
点击图片，展示大图
左右滑动，切换图片
实现功能
图片列表
应用技术
ionic row & col cssionic list cardng-src动态设置图片路径代码
html代码
<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>
点击展示大图&左右滑动
应用技术
ionic ng-if （之所以不用ng-show，是因为在切换过程中，会出现闪动一下的现象，目前没发现这个现象是什么原因导致的）popover-backdrop （弹出框）ionic on-swipe实现代码
html
<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
.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+1if ($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-1if ($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; //显示大图}})
如果觉得《ionic实战之实现图片列表以及图片浏览》对你有帮助，请点赞、收藏，并留下你的观点哦！
