微信小程序实现图片预览（闭眼cv）

前言

图片预览多用于较详细的查看一个图片的效果图，它能够更直观的看到图片原本的细节，是非常实用的小功能，那微信小程序中怎么样才能得到图片预览的效果呢，今天带你了解微信小程序的中图片预览。

实现效果：

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) {// 拿到图片的地址urllet currentUrl = event.currentTarget.dataset.src;// 微信预览图片的方法wx.previewImage({current: currentUrl, // 图片的地址urlurls: [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) {// 拿到图片的地址urllet 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链接列表})},
})

效果如下：

有关于微信小程序如何将图片保存到手机相册，大家可移步博主另一篇文章（微信小程序实现将图片保存到手机相册）

微信小程序实现图片预览（闭眼cv）相关推荐

微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
微信小程序实现图片预览功能
小程序有提供预览图片的wx.previewImage方法先在页面上放上图片标签 <imagecatch:tap="preview"data-src = 'https://s ...
微信小程序实现图片预览的功能
我们大概是见过,当我们点击的图片的时候,图片会放大,然后可以左右切换查看图片其实吧这个功能还是挺常见的今天来说说在微信小程中实现这个功能 // index.wxml 中引入了一个图片然后绑定 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
微信小程序实现弹窗预览图片
今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章微信小程序之第三方UI框架 za ...
微信小程序wx.previewImage预览图片
小功能点击图片放大预览这个也是小程序开发中经常遇到的小功能,所以也单独拿出来做一下总结,其实就是一个小知识点. 文档链接 :https://developers.weixin.qq.com/min ...
小程序自定义图片预览和多图下载的实现
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage ...
微信 html自动加载js,微信小程序实现图片预加载组件
网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载 ...
微信小程序实现PDF预览功能——pdf.js(含源码解析）
文章目录前言一.pdf.js 是什么? 二.使用步骤 1.下载库文件 2.使用方式微信小程序端--使用 web-view 标签 H5 端--使用 iframe 标签(使用vue框架) 3.更改源 ...

微信小程序实现图片预览（闭眼cv）

前言

微信小程序实现图片预览（闭眼cv）相关推荐

最新文章

热门文章