uniapp实现图片预览效果

uni有一个自带的previewImage方法，是预览图片的效果，但current属性在h5下传入Number不兼容，所以使用数组的方式传入。

把预览图片封装成一个方法：

// 图片预览
const imgPreview = (list, idx) => {
    // list：图片 url 数组
    if(list && list.length > 0){        
        uni.previewImage({
            current:list[idx],    //  传 Number H5端出现不兼容 
            urls: list
        });
    }
}

 

在页面用使用这个方法：

　　photos是接口返回的对象数组，image代表图片的url地址

<view :data-index="index" @click="getPhotoClickIdx" class=""
    v-for="(item, index) in photos" :key="index">
    <img :src="'https:' + item.image" />
    <p> 我是图片 </p>
</view>

<script>
    export default {
        data() {
            return {
                photos: [],
            }
        },
        methods: {
            // 获得相册 idx
            getPhotoClickIdx(e) {
                let _this = this;
                let idx = e.currentTarget.dataset.index;
                let imgs = _this.photos.map((item, index) => {
                    if (item.image.startsWith('http:') || item.image.startsWith('https:')) {
                        return item.image;
                    }
                    return 'https:' + item.image;
                });
                _this.imgPreview(imgs, idx);
            },
        }
    }
</script>