18/7/7 小程序之预览图片功能的实现
第一步：创建wxml
<block wx:for="{{movie.casts}}">
<view class="pic">
<image src="{{item.avatars.medium}}" mode="aspectFit" data-list="{{movie.casts}}" data-src="{{item.avatars.medium}}" bindtap="previewImage"/>
<text>{{item.name}}</text>
</view>
</block>
第二步：编写js
1.点击事件为previewImage
2.previewImage:function(e){
//打印点击后的数据
console.log(e)
var array=[];
//打印数据dataset中的图片链接，src，使用data-自定义属性名
for (var i = 0; i < e.currentTarget.dataset.list.length;i++){
//获取单张图片的链接字符串
var imgs = e.currentTarget.dataset.list[i].avatars.medium;
//将单张图片连接的字符串赋值于数组中
array=Array.prototype.push(imgs)
}
//将数组赋值于变量数组中构成二维数组
var imageList = Array(array)
var src = e.currentTarget.dataset.src;
wx.previewImage({
//显示的图片数组链接表，只显示数组
urls: imageList,
//显示当前点击的图片链接，只显示字符串
current:src
})
},