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

雨点打透心脏的1/2处 2022-09-25 10:19 121阅读 0赞

所有文章，首发于CSDN-柠檬加冰博客

[原文链接地址][Link 1]

# 效果展示 #

## 图片列表 ##

![这里写图片描述][20160819112926171]

## 点击图片，展示大图 ##

![这里写图片描述][20160819112933812]

## 左右滑动，切换图片 ##

![这里写图片描述][20160819112941031]

# 实现功能 #

## 图片列表 ##

### 应用技术 ###

1.  ionic row & col css
2.  ionic list card
3.  ng-src动态设置图片路径

### 代码 ###

html代码

## 点击展示大图&左右滑动 ##

### 应用技术 ###

1.  ionic ng-if （之所以不用ng-show，是因为在切换过程中，会出现闪动一下的现象，目前没发现这个现象是什么原因导致的）
2.  popover-backdrop （弹出框）
3.  ionic on-swipe

### 实现代码 ###

html

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+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;                   //显示大图
        }
      })

[Link 1]: http://blog.csdn.net/xuexiiphone/article/details/52249380
[20160819112926171]: /images/20220718/a4a07636ad144866b4b7d7a2de5052eb.png
[20160819112933812]: /images/20220718/ac66d7ac15bb4743b5c545bc74e141eb.png
[20160819112941031]: /images/20220718/6eca3a0f86f54f4889c988fa72b8bfde.png