有时候图片列表图片过小看不清图片内容,这时我们一般就希望点击图片可以放大显示进行预览,那么,接下来我们就调用微信原生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)
}
})
},
效果: