uni-app实现多个图片预览

    科技2022-07-15  122

    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>

    Processed: 0.010, SQL: 8