uni-app 点击图片预览功能

青田。

已于 2023-08-30 16:32:46 修改

阅读量2.1k

点赞数 1

分类专栏： uniapp css 文章标签： vue.js

于 2022-06-14 11:47:24 首次发布

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125275114

版权

uniapp 同时被 2 个专栏收录

26 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文介绍了如何在uniApp中使用`uni.previewImage`方法实现详情页面图片的点击预览功能，展示了HTML模板、JavaScript方法和相关样式。开发者可以轻松为轮播图和单张图片提供预览功能，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览图片

uni.previewImage(OBJECT)

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

一般详情页面下面的图片，包括有的轮播图可以点击预览

<template>
    <scroll-view class="right" scroll-y>
	    <view class="item" v-for="item in secondData" :key="item.id">
			<image @click="previewImg(item.img_url)" :src="item.img_url"></image>
			<text>{{item.title}}</text>
		</view>
    </scroll-view>
</template>

<script>
	export default {
        data() {
			return {
                //模拟请求数据数据
				secondData: [
                    {id:'1',img_url:'https://pca-xiaomi/prev_1.jpg'},
                    {id:'2',img_url:'https://pca-xiaomi/prev_2.jpg'},
                    {id:'3',img_url:'https://pca-xiaomi/prev_3.jpg'},
                ]
			}
		},
        methods：{
           previewImg (current) {
				const urls = this.secondData.map(item=>{
					return item.img_url
				})
				uni.previewImage({
					current,
					urls
				})
                //uni.previewImage({
				//	urls:this.secondData.map(v => v.img_url),
				//	current
				//})
			}
        }
    }
</script>
<style lang="scss">
.right{
		height: 100%;
		width: 520rpx;
		margin: 10rpx auto;
		.item{
			image{
				width: 520rpx;
				height: 520rpx;
				border-radius: 5px;
			}
			text{
				font-size: 30rpx;
				line-height: 60rpx;
			}
		}
	}
</style>