1.小程序直接使用api：uni.previewImage

2.h5使用轮播图写一个组件

<template><view class="custom-image-preview" v-if="visible"><view class="overlay"></view><swiper class="swiper" :current="currentIndex" @change="onSwiperChange"><swiper-item v-for="(image, index) in images" :key="index" @click="closePreview"><image style="width: 100%;height: 100%;" :src="image" mode="aspectFit" class="preview-image" :show-menu-by-longpress="true"></image></swiper-item></swiper><view class="index-indicator">{{ currentIndex + 1 }} / {{ images.length }}</view></view></template><script>export default {props: {images: {type: Array,required: true,},current: {type: Number,default: 0,},},data() {return {visible: false,currentIndex: 0,};},methods: {openPreview() {this.currentIndex = this.current;this.visible = true;},closePreview() {this.visible = false;this.$emit('close');},onSwiperChange(e) {this.currentIndex = e.detail.current;},},mounted() {this.openPreview();},};</script><style scoped>.custom-image-preview {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;}.overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);}.swiper {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.preview-image {width: 100%;height: 100%;object-fit: contain;}.index-indicator {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);color: #fff;font-size: 24px;background: rgba(0, 0, 0, 0.5);padding: 8px 16px;border-radius: 16px;}</style>