html的写法:
<view > <image @click="openImg(indexUrl,itemImg.url)" v-for="(itemImg,indexUrl) in info.images" class="w-100" mode="widthFix" :key="indexUrl" :src="itemImg.url"></imag> </view>
<script>
export default{
data(){
return{
info:{ username:"昵称", userpic:"/static/default.jpg", newstime:"2019-10-20 下午04:30", isFollow:false, title:"我是标题", titlepic:"/static/demo/datapic/11.jpg", support:{ type:"support", // 顶 support_count:1, unsupport_count:2 }, comment_count:2, share_num:2, content:"帝莎编程学院:uni-app第二季仿商城类实战项目开发,uni-app第二季仿微信实战项目开发", images:[{ url:"https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/4.jpg" },{ url:"https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/5.jpg" }] }
}
},
//由于图片预览这个固定写法中需要将所传图片路径变为数组的形式,但
上面所定义的是数组对象的形式获取值,所需首先map筛选一下
computed:{
imageList(){
return this.info.images.map(item=>item.url)
}
} ,
methods:{
openImg(index){
//预览图片
uni.previewImage({
//current根据根据所传的下标,放大数组中与下标相对应的图片
current:index,
urls:this.imageList
})
}
}
}
</script>