【uniapp】微信小程序图片预览

Zh.冠军

已于 2023-01-10 11:08:21 修改

阅读量878

点赞数 1

分类专栏：前端文章标签： uni-app 学习 vue.js

于 2023-01-09 16:49:21 首次发布

本文链接：https://blog.csdn.net/weixin_38673922/article/details/128616913

版权

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

一、效果图

在这里插入图片描述

二、代码块

<template>
	<view>
		<view v-for="(item,index) in photos" :key="index" >
			<view class="box">
				<image :src="item.pics_small_url" mode="widthFix" @click="previewImage(index)"></image>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				photos: [{
					id: '1',
					pics_small_url:'https://fc5tn.baidu.com/it/u=1112089068,583547811&fm=202&src=787&fc_m=cvican',
					pics_big_url:'https://fc5tn.baidu.com/it/u=1112089068,583547811&fm=202&src=787&fc_m=cvican'
				},{
					id: '2',
					pics_small_url:'https://fc5tn.baidu.com/it/u=1789275420,3071612989&fm=202&src=787&fc_m=cvican',
					pics_big_url:'https://fc5tn.baidu.com/it/u=1789275420,3071612989&fm=202&src=787&fc_m=cvican',
				}] // 存放从后台获取的数据
			}
		},
		methods:{
			previewImage(index) {
				let photoList = this.photos.map(item => {
					return item.pics_big_url;
				});
				uni.previewImage({
					current: index,
					urls: photoList
				});
			}
		}