微信小程序实现图片预览的功能

我们大概是见过，当我们点击的图片的时候，图片会放大，然后可以左右切换查看图片
其实吧这个功能还是挺常见的今天来说说在微信小程中实现这个功能

// index.wxml 中引入了一个图片然后绑定点击事件 preview

<image data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" bindtap="preview" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></image>

// index.js
调用了 wx.previewImage的方法然后数组里面写入要预览的图片就可以

Page({data: {},preview(e){console.log(e.currentTarget.dataset['src'])var current=e.currentTarget.dataset['src'];wx.previewImage({current,urls:              ['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2154655496,2326705781&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1112031990,1930311586&fm=26&gp=0.jpg','https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2769418126,2931866295&fm=26&gp=0.jpg'],})}
})

实际的效果

微信小程序实现图片预览的功能相关推荐

微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
微信小程序实现图片预览功能
小程序有提供预览图片的wx.previewImage方法先在页面上放上图片标签 <imagecatch:tap="preview"data-src = 'https://s ...
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.更改源 ...

微信小程序实现图片预览的功能

微信小程序实现图片预览的功能相关推荐

最新文章

热门文章