uniapp点击预览图片，两种效果

背景：

在使用uniapp框架中，我们对图片的展示需要点击放大展示(单张)；如果是多张图片，要支持左右滑动查看多张图片(多张)。

官网链接：点击跳转官网

一、单张，点击放大

代码：

<template>
<u--image :src="personPicUrl" width="100px" height="100px"
   @click="imgPreview(personPicUrl)"></u--image>
</template>

<script>
export default {
    name: "imageDetail",
    data() {
        return {
           personPicUrl: '',
      }
    },
    methods: {
        imgPreview(url) {
            uni.previewImage({
                urls: [url]
            })
        },
    },
</script>

核心代码：

//图片预览，封装方法   
imgPreview(url) {
            uni.previewImage({
                urls: [url]
            })
        },

二、多张，点击放大并左右滑动 

代码：

<template>
    <u--image v-for="(item, index) in imgsData" :key="index" 
        :src="item.img" 
        width="142rpx"
        height="104rpx" 
        radius="4" 
        @click="imgPreview(item.img)"
    >
    </u--image>
</template>

<script>
export default {
    name: "imageDetail",
    data() {
        return {
           imgsData: [],
      }
    },
    methods: {
        imgPreview(url) {
            let arr = []
            this.imgsData.forEach((item, index) => {
                if (item.img) {
                    arr.push(item.img)
                }
            })
            let index = arr.findIndex(value => value == url)
            uni.previewImage({
                current: index,
                urls: arr,
            });
        },
    },
</script>

核心代码：

//多张图片，可以左右滑动
imgPreview(url) {
            let arr = []
            this.imgsData.forEach((item, index) => {
                if (item.img) {
                    arr.push(item.img)
                }
            })
            let index = arr.findIndex(value => value == url)
            uni.previewImage({
                current: index,
                urls: arr,
            });
        }

 效果展示：

三、其它

长按图片，的效果

uni.previewImage({
                    current: index,
                    urls: arr,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });