小程序实现预览图片:官方提供api接口 -- wx.previewImage
官方地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html
<!-- wxml -->
<view class='itme-img-view' data-id='{{item.id}}' bindtap='previewImg'>
<block wx:for='{{item.img}}'>
<image src='{{item}}' mode='aspectFill' data-index='{{index}}'></image>
</block>
</view>
我这里是类似于朋友圈列表那种数据格式,所以需要去找到预览图片所在的数组
//js
Page({
data:{
newsList:[] //数据列表
},
previewImg:function(e){
let id=e.currentTarget.dataset.id;
let imgArr=[];
for(var i=0;i<this.data.newsList.length;i++){
if(this.data.newsList[i].id == id){ //找到图片所在的数组
imgArr=this.data.newsList[i].img;
}
}
wx.previewImage({
current:imgArr[e.target.dataset.index], //当前预览的图片
urls: imgArr //需要预览的图片http链接列表
})
}
})