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>