uniapp实现图片预览效果

uni有一个自带的previewImage方法，是预览图片的效果，但current属性在h5下传入Number不兼容，所以使用数组的方式传入。

把预览图片封装成一个方法：

 1 // 图片预览
 2 const imgPreview = (list, idx) => {
 3     // list：图片 url 数组
 4     if(list && list.length > 0){        
 5         uni.previewImage({
 6             current:list[idx],    //  传 Number H5端出现不兼容 
 7             urls: list
 8         });
 9     }
10 }

在页面用使用这个方法：

　　photos是接口返回的对象数组，image代表图片的url地址

 1 <view :data-index="index" @click="getPhotoClickIdx" class=""
 2     v-for="(item, index) in photos" :key="index">
 3     <img :src="'https:' + item.image" />
 4     <p> 我是图片 </p>
 5 </view>
 6 
 7 <script>
 8     export default {
 9         data() {
10             return {
11                 photos: [],
12             }
13         },
14         methods: {
15             // 获得相册 idx
16             getPhotoClickIdx(e) {
17                 let _this = this;
18                 let idx = e.currentTarget.dataset.index;
19                 let imgs = _this.photos.map((item, index) => {
20                     if (item.image.startsWith('http:') || item.image.startsWith('https:')) {
21                         return item.image;
22                     }
23                     return 'https:' + item.image;
24                 });
25                 _this.imgPreview(imgs, idx);
26             },
27         }
28     }
29 </script>