有时候图片列表图片过小看不清图片内容，这时我们一般就希望点击图片可以放大显示进行预览，那么，接下来我们就调用微信原生API的的浏览图片程序进行对图片预览的实现。
单张图片预览
通过微信原生API实现单张图片的浏览
wxml代码
<image src="https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg" bindtap="preview" mode=""/>添加对应js的点击事件，调用预览图片的API，实现图片的预览
preview(){
wx.previewImage({
current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',//当前的图片路径
urls: [ // 所有图片的URL列表，数组格式 预览图片路径
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg'
],
success: function(res) {
console.log(res)
}
})
},图片列表预览
通过读取data中的数据，显示成图片列表的形式，点击图片显示预览图
wxml代码如下：
对应js代码：
data中数据imgList:
imgList:[
{
id:1,
url: 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
title:"图片1"
},
{
id:2,
url: 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg',
title:"图片2"
},
{
id:3,
url: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
title:"图片3"
}
]轮播图预览图
使用数据和图片列表数据一样，以下是轮播图的预览图片
wxml界面：
<view class="container">
<swiper indicator-dots="{
{true}}" indicator-color="#fff" indicator-active-color="#f00" autoplay="{
{true}}" interval="3000" duration="500" circular="{
{true}}" vertical="{
{false}}">
<block wx:for="{
{imgList}}" wx:key="*this" >
<swiper-item>
<view class="swiper-item {
{item}}">
<image src="{
{item.url}}" mode="" bindtap="preview" data-idx="{
{index}}"/>
</view>
</swiper-item>
</block>
</swiper>
</view>对应js内容
preview(event){
// console.log(event);
let idx=event.currentTarget.dataset.idx;
let imgArr=[];
this.data.imgList.forEach(item=> {
imgArr.push(item.url);
})
wx.previewImage({
current: this.data.imgList[idx].url,//当前的图片路径
urls: imgArr, // 所有图片的URL列表，数组格式 预览图片路径
success: function(res) {
console.log(res)
}
})
},效果：
