## 点击图片预览 [TOC]  ### wxml ``` <view class="casts"> <view>影人</view> <scroll-view scroll-x="true" scroll-y="false" class="scroll"> <block wx:for="{{avatarsImg}}" wx:key="index"> <image catchtap='viewPhoto' data-id="{{index}}" src="{{item.img}}"></image> </block> </scroll-view> </view> ``` >给图片绑定viewPhoto事件、传入每张图对应id和图片地址src ### wxss ``` .casts>view{ line-height: 80rpx; } .scroll{ white-space: nowrap; width: 100%; } .scroll image{ width: 190rpx; height: 260rpx; margin-right: 10rpx; border-radius: 20rpx; } ``` >scroll-view只能存放inline-block属性的标签，如要存放view这类block标签，则在css中将其转变为内联块 ### js 发送http请求数据并处理数据之后 ``` viewPhoto(event) { var id = event.currentTarget.dataset.id; var avatarsImg = this.data.avatarsImg; var larImg = this.data.avatarsImg[id].larImg; wx.previewImage({ urls: [larImg] }) } ``` >将每张图的小图、点开欲呈现的大图及图片对应的id获取到 在`wx.previewImage({urls:[ ]})`中，将大图地址填入