html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表

点击图片,实现预览图片功能,并且可循环预览图片列表!

61e0f49c7a60

image.png

一、多张图片预览

html代码

js代码

data(){

return {

photos:[

{ src: '图片路径1'},

{ src: '图片路径2'},

{ src: '图片路径3'},

……

]

}

},

methods: {

// 预览图片

previewImage(index) {

let photoList = this.photos.map(item => {

return item.src;

});

uni.previewImage({

current: index, // 当前显示图片的链接/索引值

urls: photoList, // 需要预览的图片链接列表,photoList要求必须是数组

loop:true // 是否可循环预览

});

},

}

图片的css代码自己设置就行啦

二、单张图片预览

html代码

js代码

data(){

return {

url: '图片路径'

}

},

methods: {

// 预览图片

previewImage(url){

let photoList = [];

photoList.push(img);

uni.previewImage({

current: 0,

urls: photoList // 图片路径必须是一个数组

});

},

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git ssh拉取代码_阿里云搭建git服务器

一.搭建步骤,分为两步搭建中心仓库自动同步代码到站点目录二.详细步骤如下1.先检查一下服务器上有没有安装gitgit --version如果出现版本号,说明服务器已经安装git,如图所示:2.如果没有版本信息,则先安装git&#xff1…

Word -- 列表重新编号

Word -- 列表重新编号office一言:我小心翼翼地灌溉,一日复一日地期待,那么费力,植成参天的乔木,岂愿见你终有一日从容赴死?问题 word 文档早就想解决的一个问题,这次遇到了就上网找解决掉了&…

非持久连接和持久连接

非持久连接和持久连接 HTTP既可以使用非持久连接(nonpersistent connection),也可以使用持久连接(persistent connection)。HTTP/1.0使用非持久连接,HTTP/1.1默认使用持久连接。 非持久连接 让我们查看一下非持久连接情况下从服务器到客户传送一个Web页面…

计算机开机键鼠无法识别,我得电脑一开机就检测不到键盘和鼠标

2005-10-18 16:06:131、开机后当出现dos界面时,按一下pause键(这个键在四个方向键的上边,仔细找就能找到),如果计算机启动停止,说明你的键盘起作用,主板在开机时就已经检测到了鼠标键盘。启动后不能使用鼠标键盘&#…

vs2003 局部友元访问私有不可访问_C++ 类:重载运算符与友元

18.类中重载运算符与友元上次节中学习了如何在类中重新定义赋值()运算符,实际上在一个自定义类中除了赋值()运算符外,类的对象是不可以直接使用运算符的,比如你在main函数中写这样的代码会报错:如果想解决这些报错问题&#xff0c…

Django REST framework 视图

上一部分代码在序列化部分 类继承顺序 ############### mixins.py ################ # 类中调用的方法均在 GenericAPIView 类中实现,所以下列类需要结合 GenericAPIView 使用 class ListModelMixin(object) # 查看继承类def list(self, reque…

IOS7.1.1真的像网上流传的那么好?没有任何问题么??

IOS7.1.1推送更新之后到处看到网上说711好的~~ 那么IOS7.1.1真的像网上现在流传的那么好么? 其实不然,IOS7.1.1目前众多网友反映说升级ios7.1.1之后APPstore连接不上了,提示无法连接到APPstore。 这个问题也不难解决~还是之前的老办法~ 那么今…

三校生计算机对口本科有哪些学校,宝山三校生五月对口高考报名

多次复习生活不可能像你想象得那么好,但也不会像你想象得那么糟。我觉得人的脆弱和坚强都超乎自己的想象。多种方式结合起来复习单一的复习方法,易产生消极情绪和疲劳,如果采用交谈复习法、讨论复习法、自我检查复习法多样化的复习方法&#…

localhost 已拒绝连接_【Python】MongoDB数据库的连接和操作

安装Python 要连接 MongoDB 需要 MongoDB 驱动。pip安装:python3 -m pip3 install pymongo创建数据库import pymongo myclient pymongo.MongoClient("mongodb://localhost:27017/")mydb myclient["loaderman"]注意: 在 MongoDB 中&#xff0c…

checkbox已设置为checked--true-但不勾选问题解决方法(只第一次勾选有效)

一、出现的问题及解决方法: 今天在写一个table相关插件的时候无意中发现了这样一个问题,记得以前在写这种控制checkbox选中与非选中的代码时并没有这种bug,当时也是用的checked属性,而现在却行不通了。 于是乎做了以下测试&#x…

Django REST framework 认证、权限和频率组件

认证与权限频率组件 身份验证是将传入请求与一组标识凭据(例如请求来自的用户或其签名的令牌)相关联的机制。然后 权限 和 限制 组件决定是否拒绝这个请求。 简单来说就是: 认证确定了你是谁权限确定你能不能访问某个接口限制确定你访问某…

高速率AVS整数变换的汇编实现与优化

1 引言 AVS标准Ⅲ采用的8x8整数变换在获得较H.264更高的压缩率和主观图像质量的同时,增加了算法的实现复杂性和时间开销。本文重点研究AVS编解码器的整数变换模块,针对不同的算法实现模式,在原有Visual C6.0整数变换模…

解析H.264视频编解码DSP实现与优化

引言 基于互联网的数字视频产业前景看好,而3G的规模部署,也会推动移动视频通信成为现实。但数字化后的视频图像具有数据海量性,给图像的存储和传输造成较大的困难。数字视频产业,是指数字内容中以数字视频形态为主的文化创意和传播…

python 打包exe_python如何封装为exe

1、首先进入python安装路径D:\Python27\Scripts下,查看pip或easy_install是否安装。2、确保安装了pip或者easy_install,在cmd命令行下输入“easy_install”,没有提示“xxx不是内部或外部命令……”,就说明easy install工具安装成功…

Django REST framework 解析器和渲染器

解析器的作用 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己可以处理的数据。本质就是对请求体中的数据进行解析。 在了解解析器之前,我们要先知道Accept以及ContentType请求头。 Accept是告诉对方我能解析什么样的数据&#xff0c…

MyBatis的学习之路(二)

上篇文章介绍了MyBatis的配置文件,现在来介绍实体映射文件Mapper.xml。 说道实体映射文件,就不得不说一下实体与表之间的映射关系:单表映射和多表映射。 a. 单表映射 1 public class Admin{ 2 private String id; 3 private String n…

python爬取toefl_spark学习进度6-Python爬取数据的四个简单实例

今天本来想把昨天安装的intellij配置好,但是一直显示没有网络,网上查了相关资料也没有查出来解决办法。然后暂停了intellij的配置,开始做了几个Python爬取简单数据的实例,先做了几个最简单的,以后再加大难度&#xff0…

Django REST framework 版本

API 版本控制允许我们在不同的客户端之间更改行为(同一个接口的不同版本会返回不同的数据)。 DRF提供了许多不同的版本控制方案。 可能会有一些客户端因为某些原因不再维护了,但是我们后端的接口还要不断的更新迭代,这个时候通过…

AngularJS中的过滤器(filter)

AngularJS中的过滤器是用于对数据的格式化,或者筛选的函数,可以直接通过以下语法使用: {{expression|filter}} {{expression|filter1|filter2}} {{expression|filter1:param1,param2,...|filter2} 过滤器的种类有number,currency&…

计算机考试上传照片教程,电脑照片传到iPhone手机的详细步骤【图文】

苹果自带的iOS系统是不可以随便和电脑进行数据交换的,必须使用iTunes软件。许多用户为此问题困扰,我们有什么可以把电脑照片传到iPhone手机?下面我们就一起来看看把电脑照片传到iphone设备的详细步骤。具体方法如下:1,…