uni-app实现多个图片预览

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:"",
                    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>

最后

以上就是坚强耳机为你收集整理的uni-app实现多个图片预览的全部内容，希望文章能够帮你解决uni-app实现多个图片预览所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。