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>