uniapp 避坑指南-图片预览（本地预览）

需求描述

有一个类似以下的数组，通过 v-for 循环，现在需要在用户点击图片后使用 uniapp 的图片预览 Api。

//view

<view v-for:'(item,index) in picList' :key="index">
    <image :src="item.url" @click='imgPreview(item.url,id)'> </image>
</view>

//script
<script>
export default {
    data: ()=>{
        picList:[
                {url:'/static/img/1.png',id:0},
                {url:'/static/img/2.png',id:1},
                {url:'/static/img/2.png',id:3},
            ]
    }
    methods:{
        imgPreview(url,id){
            uni.previewImage(urls:url,current:id)
        }
    }
}
</script>

看起来好像没有问题，但是一点击发现没反应。

问题排查

在点击事件最后添加了打印，发现点击事件被正常触发了，没办法又看了下官方文档，发下了urls这个参数是数组，而我这里传的是一个字符串。于是把代码改造了一下。

//view

<view v-for:'(item,index) in picList' :key="index">
    <image :src="item.url" @click='imgPreview(item.id)'> </image>
</view>

//script
<script>
export default {
    data: ()=>{
        picList:[
                {url:'/static/img/1.png',id:0},
                {url:'/static/img/2.png',id:1},
                {url:'/static/img/2.png',id:3},
            ]
    }
    methods:{
        imgPreview(id){
            let picUrls = this.picList.map((item)=>item.url)
            uni.previewImage(urls:picUrls ,current:id)
        }
    }
}
</script>