微信小程序图片预览wx.previewImageObject-object
目录
微信小程序图片预览（wx.previewImage(Object object)
在微信小程序的开发过程中，有时候我们会遇到这样的需求，点击图片可预览图片，并且可以左右滑动等相关操作，此时我们可以使用微信给我们提供的相关API来实现，具体实现方式如下：
wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
微信api地址
效果图如下：
wxml：
<view class="area-middle" bindtap="gocommentDetail">
<text>这件商品真的是挺好的</text>
<view class="comimg-box">
<image src="{{item}}" data-src="{{item}}" data-list="{{imgArr}}" wx:for="{{imgArr}}" catchtap="pictureview" wx:key="index" ></image>
</view>
</view>js:
Page({
data: {
isActive:0,
imageNum:3,
imgArr:[
'https://xyylcdn.weein.cn/group1/M00/06/BF/rBUgBF8WtdWAKPOrAABgCedJ7gk388.jpg',
'https://xyylcdn.weein.cn/group1/M00/06/BF/rBUgBF8WtyuASPvRAABkG1TAPl8877.jpg',
'https://xyylcdn.weein.cn/group1/M00/04/19/rBUUDl78bAyAUgpEAAMr1h87H1A753.jpg'
]
},
onLoad: function (options) {
},
changeEvent:function(e){
var getStatus = e.currentTarget.dataset;
if(getStatus.status == 1){
this.setData({
isActive:getStatus.status
})
}else{
this.setData({
isActive:getStatus.status
})
}
},
pictureview:function(event){
var src = event.currentTarget.dataset.src;//获取data-src
var imgList = event.currentTarget.dataset.list;//获取data-list
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
},
gocommentDetail:function(){
wx.navigateTo({
url: '/pages/commentsDetail/commentsDetail'
})
},
manageStr:function(str){
let postStr;
if(str){
postStr=str.substr(0,1)+'****'+str.substr(str.split('').length-1,str.split('').length);
}
return postStr;
},
onShow: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})以上就是改功能的实现方式，如果对你有帮助的话，点个赞吧！欢迎交流