在uni-app中显示图片并且点击图片显示大图，可以使用<image>组件来显示图片，并且使用@click事件监听图片的点击。以下是一个简单的示例代码：
<template>
<view>
<!-- 循环显示图片列表 -->
<view class="image-list">
<image
v-for="(img, index) in imageList"
:key="index"
:src="img"
class="image-item"
@click="previewImage(index)" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 图片列表
imageList: [
'http://example.com/image1.jpg',
'http://example.com/image2.jpg',
'http://example.com/image3.jpg'
]
};
},
methods: {
// 预览图片
previewImage(index) {
// 使用uni.previewImage API 预览图片
uni.previewImage({
current: index, // 当前显示图片索引
urls: this.imageList // 需要预览的图片链接列表
});
}
}
};
</script>
<style>
.image-list {
display: flex;
flex-wrap: wrap;
}
.image-item {
width: 30%; /* 根据需要调整图片宽度 */
margin: 5px; /* 图片间距 */
}
</style>在这个示例中，我们定义了一个名为imageList的数组来存储图片链接。在模板中，我们使用v-for指令循环显示每个图片。每个<image>组件都有一个@click事件监听器，当点击图片时，调用previewImage方法。在previewImage方法中，我们使用了uni.previewImage API 来预览当前图片以及列表中的其他图片。