Uniapp 点击图片放大

最新推荐文章于 2024-06-06 14:17:58 发布
最新推荐文章于 2024-06-06 14:17:58 发布
阅读量611 收藏 3
点赞数 8
分类专栏： uniapp 文章标签： uni-app windows java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63199745/article/details/138198997
版权

1、html(循环图片)

	<view v-for="(i,index) in photo_list" :key="'photo'+index">
		<img :src="i" alt="" @click="ClickImage(photo_list,i)" />
	</view>

2、js(方法)

			ClickImage(PhotoAddress, index) {
				uni.previewImage({
					urls: PhotoAddress, //需要预览的图片http链接列表
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

ClickImage方法参数的意思：

photo_list:图片路径列表 ['https://img0.baidu.com/it/u=2519000851,2866084026&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=5051e08182f3394eee55e261b0c4db68','https://img0.baidu.com/it/u=3527186857,442667915&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=3e8686f2f8c37a7b273756c32a31a201','https://img1.baidu.com/it/u=4285143278,687630500&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=9cdccbb26aee6441751f0b7579799fb0']
i:当前图片的路径
 如:https://img0.baidu.com/it/u=3527186857,442667915&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=3e8686f2f8c37a7b273756c32a31a201

努力搬砖的小码
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app - 实现用户点击图像放大预览功能 / 支持左右滑动与手指手势放大缩小图片（支持单图与多图、实现手机查看大图全屏预览功能），类似微信查看图片的效果，支持 App、H5、小程序等全端兼容！
王佳斌
10-13 8052
uniapp中app安卓苹果端、小程序端、H5端页面中有多个图片需要预览,且需要左右滑动，uni-app实现滑动查看大图功能，图片放大缩小预览,并支持图片拖动附效果图，点击预览图片(包括多张左右滑动查看)，uni.previewImage 官方文档，uni-app微信小程序图片放大预览带有图片描述，在UNI-APP中怎么实现点击图片后放大预览？uni-appH5怎么点击图片后像微信一样放大图片，还能双指缩放并保存图片，点击图片放大预览，多图放大预览 html js，uniapp中使用scroll-view实
APP里点击图片放大功能实现
06-14
例如点击UITableviewCell 上的图片 在当前viewcontroller上全屏显示出来,再次点击即消失,代码实现简单逻辑清楚
uniapp里面点击图片放大图片
最新发布
weixin_52326756的博客
06-06 286
需求：小程序里面的图片需要点击有阅览功能。 思路：利用wx.previewImage实现图片预览功能。
uniapp——点击图片放大预览
wy313622821的博客
01-10 2万+
点击图片放大预览 效果图： <template> <view class="content"> <image class="logo" src="/static/logo.png" @click="clickImg"></image> </view> </template> <script> export default { data() { return { title: 'Hello',
小程序-uni.previewImage实现图片的预览功能
热门推荐
yupyuping的博客
12-01 2万+
uni.previewImage是uniapp提供的预览图片的方法 1.准备结构 <view v-for="(item,index) in photos" :key="index"> //点击当前图片传入索引 <image :src="item.pics_small_url" @click="getImgIndex(index)"></image> </view> 2.实现功能 <script> expor
UniApp小程序知识点1-点击图片后放大展示
qq_57368535的博客
04-17 361
点击图片的点击事件 @click="preview"
uniapp实现点击图片预览放大，长按下载图片
ljh574649119的专栏
03-13 1804
3. 使用uniapp中的 uni.saveImageToPhotosAlbum API 将图片保存到相册。1. 使用uniapp中的 uni.previewImage API 预览图片。2. 使用uniapp中的 uni.downloadFile API 下载图片。
点击base64图放大预览依赖
11-12
点击base64图放大预览，可以基于uniapp框架图片预览 点击base64图放大预览，可以基于uniapp框架图片预览
微信小程序实现点击图片放大预览
12-13
这个强大的API( wx....在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了) index.wxml <image bind
小程序富文本提取图片可放大缩小
10-15
主要为大家详细介绍了小程序富文本提取图片可放大缩小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp 微信端 仿淘宝 视频+图片 轮播(一比一还原)
10-22
在本教程中，我们将深入探讨如何使用uniapp框架在微信小程序上实现一个视频与图片结合的轮播功能，以此来一比一地复刻淘宝应用中的相似设计。uniapp是一个跨平台的开发工具，它允许开发者用一套代码库构建iOS、...
vue开发uniapp点击图片放大
Armof的博客
02-08 689
vue开发uniapp点击图片放大 html页面 <view class="Shopdetails_back_center_image"> <image :src=" fileUrl + qrcode.qrcode" @click="showBigImg(fileUrl + qrcode.qrcode)" mode=""></image>//:src处为接口请求图片路径拼接 </view> 2.methods方法 showBigImg(
uniapp 点击图片放大预览
xniYa的博客
11-11 789
uniapp 点击图片放大预览
uni-app----图片点击放大功能&&点击文本进行复制功能【安卓app端】
heavenz19的博客
11-04 939
【代码】uni-app----图片点击放大功能&&点击文本进行复制功能【安卓app端】
uni-app点击预览大图，并可进行缩放
weixin_64962562的博客
04-18 993
如果大家是一个列表，列表过长点击弹出大图时滑动会穿透到底部内容也被滑动，那可以给最外成dom做一个动态的样式变换。uni-app预览大图且可进行缩放，我们可以使用uni-app内置的组件movable-area。首先为了我们点击预览功能可以被更多地方调用使用，避免重复的代码出现，我们可以封装一个预览的组件。当大图弹出时设置为overflow: hidden!important;帮助解决内容过多时，弹出大图后滑动穿透到底部内容被滑动。切记关闭时要恢复为原样式。
uniapp 支持图片放大
weixin_66579278的博客
08-29 1358
【代码】uniapp 支持图片放大。
uniapp实现点击图片预览放大。
2301_77742545的博客
12-11 2754
urls: [PhotoAddress], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了。current: '', // 当前显示图片的http链接，默认是第一个。思路：点击那个图片动态穿那个图片的url 点击事件方法接收参数使用。使用uniapp中的 uni.previewImage API。首先给你展示图片的标签注册点击事件。注意点：urls 配置项是数组。
uni-app 点击图片放大预览
qq_38004125的博客
07-23 5238
<u-image @click="imgClick(imgSrc)" :src="imgSrc"> </u-image> <script> // https://ext.dcloud.net.cn/plugin?id=123 图片预览插件安装地址 import { pathToBase64, base64ToPath } from '../../js_sdk/mmmm-image-tools/index.js' export default { metho
uniapp开发微信小程序点击图片放大展示
stars______的博客
02-04 1872
【代码】uniapp点击图片放大展示。
uniapp点击图片放大
09-06
在Uniapp中，想要实现点击图片放大的效果，可以通过以下步骤实现： 1. 在页面中引入需要放大的图片，并添加一个点击事件。 2. 在事件的回调函数中，使用uniapp提供的API将点击的图片路径传递给一个全屏显示的页面。 3. 在全屏显示的页面中，通过获取传递过来的图片路径，在页面上显示大图。 4. 添加一个点击事件，当用户点击图片的时候，关闭全屏显示的页面，回到原来的页面。 具体步骤如下： 1. 在需要放大的图片所在的页面中添加如下代码： ```html <template> <view> <image @click="showFullScreenImage" src="path/to/image.png"></image> </view> </template> ``` 2. 在 methods 中添加 showFullScreenImage 方法： ```javascript methods: { showFullScreenImage() { uni.navigateTo({ url: '/pages/fullScreenImage?imagePath=path/to/image.png' //将图片路径作为参数传递给全屏显示的页面 }) } } ``` 3. 在全屏显示的页面 fullScreenImage 中添加如下代码： ```html <template> <view> <image @click="closeFullScreenImage" :src="imagePath"></image> </view> </template> ``` 4. 在 methods 中添加 closeFullScreenImage 方法： ```javascript methods: { closeFullScreenImage() { uni.navigateBack() //关闭全屏显示的页面，返回原来的页面 } }, mounted() { this.imagePath = this.$route.query.imagePath //在页面加载时获取传递过来的图片路径 } ``` 通过以上步骤，当用户点击图片时会打开全屏显示的页面，显示原始大小的图片。当用户点击全屏图片时，会关闭全屏显示的页面，回到原来的页面。这样就实现了点击图片放大的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值