uniapp点击图片放大预览

阐述
  • 有些时候我们在用uniapp显示图片时,有的不宜全部显示到屏幕上,uniapp提供了一个非常好用的api。

实现方式如下:

复制代码
<template>
	<view class="content">
		<image class="logo" src="/static/images/a.png" @click="clickImg"></image>
	</view>
</template>
 
<script>
	export default {
		methods: {
			clickImg() {
				uni.previewImage({
					urls: ["/static/images/a.png"], //需要预览的图片http链接列表,多张的时候,url直接写在后面就行了
					current: '', // 当前显示图片的http链接,默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
		}
	}
</script>

效果

相关推荐
于先生吖13 小时前
UniApp搭配Java后端实现到店预约上门指派,订单状态流转与结算开发教程
java·开发语言·uni-app
岳哥i17 小时前
uniapp打包原生App流程及兼容性适配
uni-app
niech_cn18 小时前
uniapp开发App(iOS、Android、鸿蒙Next)之配置pages.json 页面路由(三)
android·ios·uni-app
郑州光合科技余经理19 小时前
海外版外卖系统源码:支付/地图/多语言核心代码实现
android·java·前端·后端·架构·uni-app·php
游戏开发爱好者820 小时前
Linux 自动上传 App Store Connect:把 IPA 上传流程接进CI工作流
linux·运维·ios·ci/cd·小程序·uni-app·iphone
暗冰ཏོ20 小时前
《uni-app 跨端开发完整指南:从基础入门到 H5、小程序、App 发布上线》
前端·小程序·uni-app·vue·html5
梦梦代码精20 小时前
TP8+Vue3+UniApp:LikeShop架构受青睐!
架构·uni-app
暗冰ཏོ21 小时前
2026 App 开发完整指南:Android、iOS、跨平台开发与安卓应用上线全流程
android·ios·uni-app·web app·app开发
Geek_Vison2 天前
技术实践:保险健康APP引入第三方小程序实战,如何构建一个安全可控的沙箱环境~
android·安全·小程序·uni-app·mpaas
2501_915918412 天前
Python如何抓取HTTPS请求包的完整教程与代码示例
android·ios·小程序·https·uni-app·iphone·webview