简单的swiper实现照片预览功能

商品详情轮播图预览效果

为轮播图中的 image 图片绑定 click 事件处理函数：

	<swiper-item class="photo-box" v-for="(item,i) in shopDetail.data_photo.shop_photo" :key="i">
	 	<!-- 把当前点击的图片的索引，传递到 preview() 处理函数中 -->
		<image class="shop-iamge" :src="item.shop_big_logo"  @click="preview(i)"></image>
	</swiper-item>

在 methods 中定义 preview 事件处理函数：

	// 实现轮播图的预览效果
	preview(i) {
	  // 调用 uni.previewImage() 方法预览图片
	  	uni.previewImage({
	    // 预览时，默认显示图片的索引
	    current: i,
	    // 所有图片 url 地址的数组
	    urls: this.goods_info.pics.map(x => x.pics_big)
	  })
	}

所引用的数据结构：

mock.js

	"data_photo": {
		"shop_id": 1,
		"shop_title": "商家相册",
		"shop_photo":[
			{
				"photo_name":"环境",
				"shop_big_logo": "图片.jpg",
				"shop_small_logo": "图片.jpg",
			},
			{
				"photo_name":"师资",
				"shop_big_logo": "图片.jpg",
				"shop_small_logo": "图片.jpg",
			},
			{
				"photo_name":"学员案例",
				"shop_big_logo": "图片.jpg",
				"shop_small_logo": "图片.jpg",
			},
		]
	},