小程序图片点击放大缩小

图片点击预览放大缩小：

wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

参数详细信息：

Object object

属性	类型	默认值	必填	说明	最低版本
urls	Array.<string>		是	需要预览的图片链接列表。2.2.3 起支持云文件ID。
current	string	urls 的第一张	否	当前显示图片的链接
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

 

示例：使用网络图片

wxml:

 

<view class='imgList'>

<view class='imgList-li' wx:for='{{imgArr}}'>

<image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>

</view>

</view>

 

 

wxss:

 

.imgList{

width: 100%;

}

.imgList .imgList-li{

width: 100%;

}

.imgList .imgList-li .img{

width: 400rpx;

height: 400rpx;

}

 

 

js:

 

Page({

 

/**

* 页面的初始数据

*/

data: {

imgArr: [

'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',

'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',

'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',

'https://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'

]

},

previewImg: function(e) {

// console.log(e.currentTarget.dataset.index);

var index = e.currentTarget.dataset.index;

var imgArr = this.data.imgArr;

wx.previewImage({

current: imgArr[index], //当前图片地址

urls: imgArr, //所有要预览的图片的地址集合 数组形式

success: function(res) {},

fail: function(res) {},

complete: function(res) {},

})

}

})

 

示例：使用本地图片

wxml:

 

<view class='imgList'>

<view class='imgList-li' wx:for='{{imgArr}}'>

<image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>

</view>

</view>

wxss:

 

.imgList{

width: 100%;

}

.imgList .imgList-li{

width: 100%;

}

.imgList .imgList-li .img{

width: 400rpx;

height: 400rpx;

}

js:

 

Page({

 

/**

* 页面的初始数据

*/

data: {

imgArr: ['../utils/img/01.jpg', '../utils/img/3.jpg', '../utils/img/dog.jpg', '../utils/img/feima.png',

'../utils/img/wazi.jpeg']

},

previewImg: function(e) {

// console.log(e.currentTarget.dataset.index);

var index = e.currentTarget.dataset.index;

var imgArr = this.data.imgArr;

wx.previewImage({

current: imgArr[index], //当前图片地址

urls: imgArr, //所有要预览的图片的地址集合 数组形式

success: function(res) {},

fail: function(res) {},

complete: function(res) {},

})

}

})

所以这个接口, 按照官方示例, 可能只支持 http 或者 https 协议的网络图片地址.

注意：

网上还有说本地图片确实是不可以的，后面通过选取手机相册内的照片，可以预览，前提是在真机上演示。