ionic实战之实现图片列表以及图片浏览
2024-06-22 14:58:48
所有文章，首发于CSDN-柠檬加冰博客
原文链接地址
效果展示
图片列表
点击图片，展示大图
左右滑动，切换图片
实现功能
图片列表
应用技术
- ionic row & col css
- ionic list card
- ng-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实战之实现图片列表以及图片浏览相关推荐
- 小程序源码图片列表，图片下载
每日分享两个小程序源码 下载地址:无极低码:wheart.cnhttps://wheart.cn/so/home?m=dw&rid=f6d836c8-d54a-11ed-96fa-525400 ...
- Python爬虫从入门到精通——爬虫实战：爬取今日头条图片新闻
分类目录:<Python爬虫从入门到精通>总目录 本文为实战篇,需提前学习Python爬虫从入门到精通中<基本库requests的使用>和<Ajax数据爬取(一):基本原 ...
- [day4]python网络爬虫实战：爬取美女写真图片(Scrapy版)
l> 我的新书<Android App开发入门与实战>已于2020年8月由人民邮电出版社出版,欢迎购买.点击进入详情 文章目录 1.开发环境 2.第三方库 3.Scrapy简介 4. ...
- [day2]python网络爬虫实战：爬取美女写真图片(增强版)
l> 我的新书<Android App开发入门与实战>已于2020年8月由人民邮电出版社出版,欢迎购买.点击进入详情 文章目录 1.开发环境 2.第三方库 3.实现 1.分析url格 ...
- 图片管理之获取图片列表数据
图片管理 在图片表中我们需要对图片数据进行增删改查操作,这时候我们可以借助于视图集中的ModelViewset来完成相应的操作 获取图片列表数据 接口分析 请求方式: GET /meiduo_admi ...
- R语言ggplot2可视化在可视化的接种中插入图片、添加图片实战
R语言ggplot2可视化在可视化的接种中插入图片.添加图片实战 目录 R语言ggplot2可视化在可视化的接种中插入图片.添加图片实战
- html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表
点击图片,实现预览图片功能,并且可循环预览图片列表! image.png 一.多张图片预览 html代码 js代码 data(){ return { photos:[ { src: '图片路径1'}, ...
- html（+css）/02/html标记语义应用，html列表与图片的应用
html(+css)/02/html标记语义应用,html列表与图片的应用 文件都有文件名,我们网页的文件名 html文件,不建议使用中文文件名,因为将来网页文件都是保存在服务器上的,建议都使用英文 ...
- html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表 使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图 本案例在DIVCSS5模板基础上 ...
最新文章
- [Winform]检测exe是否已经运行，并将其置顶
- erlang节点互相ping，一个能ping通，另外一个不行。
- isp 图像算法(四)之white balance gain control 就是对 r,gr,gb,b 进行加权
- 知道python网课答案_Python程序设计答案
- 来，看看这20个常用的宏定义！
- Codeforces Round #365 (Div. 2) D. Mishka and Interesting sum (离线树状数组+前缀xor)
- c语言1E3是什么数据类型,C语言课件第2章数据类型和表达式.ppt
- operator* operator- 操作符的使用
- Android入门项目（校园软件）
- html期末作业代码网页设计 我的家乡网站设计——我的家乡-四川成都(4页) HTML+CSS+JavaScript
- win7注册服务器错误代码,win7系统启动不了iis服务器出现错误代码怎么解决
- hackintosh黑苹果_如何构建用于编码的Hackintosh
- mysql添加字段 说明_MYSQL数据库MSSQL 添加字段说明
- 从未见过如此可笑的白领标准_独木桥的博客_雅虎博客_雅虎空间
- 使用docker下载搭建TeamCity容器并使用
- latex 图、表 中英文标题
- 联合循环——16（电缆终端接地总结）
- 乘云创数，华为云企业快成长大数据技术创新论坛（深圳站）圆满落幕！
- axis2 jax-ws_Axis2 WS-Security基础知识
- Linux命令之timeout