uni-app 微信小程序 实现图片预览

基本用法：

在uniapp中，我们可以使用uni.previewImage()API对图片进行预览，具体使用方法如下：

uni.previewImage({
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
  current: 0
});

其中，urls参数为一个字符串数组，表示需要预览的图片数组；current参数为一个数字，表示当前选中的图片在数组中的索引值，从0开始计数。

在调用uni.previewImage()方法后，uniapp会显示系统自带的图片预览界面，用户可以滑动查看多张图片，也可以缩放图片进行查看。

在vue3中的简单示例：

<script setup lang="ts">
import { ref, reactive } from 'vue'
const state = reactive({
  imgList: ['https://img1.baidu.com/it/u=2749857666,4031842358&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=773',
    'https://img2.baidu.com/it/u=2583282997,4052280191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1081',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F546d1162-c6cb-4001-9110-fe1e05ac4e65%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696840654&t=54e2db45921da0a2c48a7b88a16890a0',
    'https://img1.baidu.com/it/u=4223515363,158474147&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fcb5924af-c6a9-44de-b4f5-ab11f0123223%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696840654&t=0f7fdaea9376f89222845bcc7f0cee10'
  ]
})
const previewImg = (index = 0) => {
  uni.previewImage({
     urls: state.imgList,
     current: index
  });
}
</script>

循环绑定图片的时候使用

这里的item.imgJson是一个图片id集合的json字符串，所以需要转化成json对象。GetImgUrl是一个我们系统里边封装的根据图片id获取图片地址的方法

<image class="imgitem" v-for="(img, index) in JSON.parse(item.imgJson)" :key="index" mode="aspectFill"
:src="GetImgUrl(img)" @tap="previewImg(item.imgJson,index)"/>
<view class="" style="flex: 1" />

图片预览方法：

// 图片预览
const previewImg = (imgListJson: any, index = 0) => {
    let imgIdList = JSON.parse(imgListJson)
    let imgList = [] as any
    // 根据图片id获取图片的浏览地址
    for (let index = 0; index < imgIdList.length; index++) {
        const element = imgIdList[index];
        imgList.push(GetImgUrl(element))
    }
    uni.previewImage({
        urls: imgList,
        current: index
    });
}