uni-app uni.previewImage预览图片

news/2024/7/10 2:19:02 标签: uni-app, 前端, vue

使用uni.previewImage方法点击图片预览

        <!-- 轮播图 -->
		<swiper 
			class="swiper" 
			:circular="true" 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="3000"
			:duration="1000"
		>
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="preViewPic(item)">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

点击轮播图里的图片,进行预览,swiperList保存图片的地址数组

swiperList: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F811%2F0HQ4104127%2F140HQ04127-5-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674093323&t=910c2b4330b8b3096d64b8c2ffd70869',
					'https://img1.baidu.com/it/u=1294439722,116143144&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
					'https://img0.baidu.com/it/u=946314603,465355950&fm=253&fmt=auto&app=138&f=JPEG?w=461&h=346',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F472309f7905298220ed7b8b5d9ca7bcb0b46d4e4&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674093429&t=54be279b25d753b0877db919c283909f',
					'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop=0,14,470,285;w=470;q=99/sign=969ddebadbc451dae2b956ab8bcd7e57/b8014a90f603738d243f4ac6b51bb051f919ecd9.jpg'
				],

methods 预览方法

// 点击图片预览
			preViewPic(item){
				uni.previewImage({
					urls:this.swiperList,
					current:item
				})
			}

https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject


http://www.niftyadmin.cn/n/1740820.html

相关文章

光华科技光刻胶_21只光刻胶概念(名单)出炉!表单一览

连板数量21家中迪投资5板&#xff0c;宁波联合 神驰机电 神马电力4板&#xff0c;汉缆股份 华盛昌 浙江鼎力3板&#xff0c;海航投资世联行 飞龙股份 安洁科技 京威股份 三丰智能 容大感光 晶瑞股份 奥飞数据 光大嘉宝 电子城博天环境 兆易创新 聚辰股份2板股票简称 光华科技 &…

idea java开发给方法上加注释

打开IDEA开发工具&#xff0c;file -> setting -> Editor -> Live Templates 点加号 选择template group 随便起一个名字 点击加号&#xff0c;选择Live Template 依次填上红框中的内容 /*** name 方法名&#xff1a;$name$* description todo: $description$* * par…

c 内存比较两个数据文件_在数据科学中使用 C 和 C++ | Linux 中国

让我们使用 C99 和 C11 完成常见的数据科学任务。-- Cristiano L. Fontana让我们使用 C99 和 C11 完成常见的数据科学任务。虽然 Python 和 R 之类的语言在数据科学中越来越受欢迎&#xff0c;但是 C 和 C 对于高效的数据科学来说是一个不错的选择。在本文中&#xff0c;我们将…

jquery改变css样式和vue改变样式的区别

jQuery做的就是操作dom节点&#xff0c;从而去改变css样式&#xff1b;而vue不用操作DOM&#xff0c;只关心数据&#xff0c;是从数据绑定的角度去改变样式的 先来看看jQuery&#xff0c;我用的是vue框架&#xff0c;所以先安装jQuery npm install jquery安装好之后&#xff0c…

希沃一体机显示触摸失灵_简析触摸查询一体机的一些基本使用常识

简析触摸查询一体机的一些基本使用常识随着智慧城市的发展&#xff0c;智能产品触摸查询一体机的应用领域越来越广泛&#xff0c;触摸查询一体机是一款只需要用手指轻轻地在触摸屏上点击图符或文字就能实现操作的智能设备&#xff0c;这种方式极大方便了那些不懂电脑的用户。触…

阿里巴巴矢量图标库Symbol方式引入

首先打开阿里巴巴矢量图标库网站&#xff1a;阿里巴巴矢量图标库 搜索你想要的图标 找到图标收入购物车 打开购物车&#xff0c;将图标添加至项目&#xff0c;如果没有项目&#xff0c;新建一个 在自己的项目下&#xff0c;选择symbol&#xff0c;点击更新代码 点击复制代码…

访问权限_win10系统提示无internet访问权限怎么办

win10系统提示无internet访问权限怎么办呢?很多朋友反映在使用电脑的时候出现没有网络访问权限的提示&#xff0c;这是怎么回事呢&#xff1f;今天小编就将无网络访问权限的解决方法分享给你们。方法一、疑难解答1、首先右击桌面右下角的网络图标&#xff0c;选择疑难解答。2、…

uniapp + vue 实现色弱测试小游戏

最终的效果&#xff1a;点击色块中不同的色块&#xff0c;跳到下一关 准备一些静态数据&#xff0c;放到js目录下&#xff0c;在vue文件中引入即可 // 在1到比1大的任意整数之间随机取一个整数 export const getRandomIntNum (maxNum) >{return Math.floor(Math.random() *…