前言
图片预览多用于较详细的查看一个图片的效果图,它能够更直观的看到图片原本的细节,是非常实用的小功能,那微信小程序中怎么样才能得到图片预览的效果呢,今天带你了解微信小程序的中图片预览。
<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
let currentUrl = event.currentTarget.dataset.src;
var imgList = []; //定义一个放图片的数组
// 循环模拟数据的数组取其中的图片字段,将其添加到imgList数组中
for (let i = 0; i < this.data.listData.length; i++) {
imgList.push(this.data.listData[i].imgUrl);
}
// 调用微信小程序预览图片的方法
wx.previewImage({
current: currentUrl, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
},
})
效果如下:
有关于微信小程序如何将图片保存到手机相册,大家可移步博主另一篇文章(微信小程序实现将图片保存到手机相册)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/79384.html