前言
随着微信小程序在手机上的普及,大家对其实用性也越来越追求。其中,图片预览功能的实现,更是备受青睐,它能够更直观的看到图片原本的细节,是非常实用的小功能。本文将针对微信小程序实现图片预览作为主题,分享一些实现方式和技巧,帮助大家更好地开发微信小程序。
实现效果:
wxml文件
<view class="imageBox">
<view>点击图片关注微信公众号</view>
<image src="{{listData.imgUrl}}" bindtap="previewSqs" data-src="{{listData.imgUrl}}"></image>
</view>
js文件
Page({
data: {
// 模拟数据
listData: {
imgUrl: "https://s1.ax1x.com/2022/04/13/LKr6i9.jpg",
}
},
// 点击事件
previewSqs(event) {
// 拿到图片的地址url
let currentUrl = event.currentTarget.dataset.src;
// 微信预览图片的方法
wx.previewImage({
current: currentUrl, // 图片的地址url
urls: [this.data.listData.imgUrl] // 预览的地址url
})
},
})
wxss文件
page {
background: #EFF4FF;
}
.imageBox {
margin: 3%;
background: white;
border-radius: 30rpx;
padding: 30rpx;
font-size: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.imageBox image {
width: 100rpx;
height: 100rpx;
}
这是最简单的一种预览方式,在一个大的集合中取对应的字段配合微信小程序 wx.previewImage
方法即可实现操作,但若是要预览一个数组中的若干个对象的图片该怎么实现呢,且看下面实操。
wxml文件
<!-- 需要循环数组拿取其中图片的字段 -->
<view class="imageBox" wx:for="{{listData}}" wx:key="index">
<view>图片{{index+1}}</view>
<image src="{{item.imgUrl}}" bindtap="previewSqs" data-src="{{item.imgUrl}}"></image>
</view>
js文件
Page({
data: {
// 模拟数据
listData: [{
imgUrl: "https://s1.ax1x.com/2022/04/13/LKr6i9.jpg"
}, {
imgUrl: "https://s1.ax1x.com/2022/04/13/LKIJmj.jpg"
}, {
imgUrl: "https://s1.ax1x.com/2022/04/13/LKIqAI.jpg"
}],
},
// 点击事件
previewSqs(event) {
// 拿到图片的地址url
const { src } = event.currentTarget.dataset;
// 从数据数组中提取图片链接
const imgList = this.data.listData.map(item => item.imgUrl);
// 调用微信小程序预览图片的方法
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
});
}
})
效果如下: