微信小程序:点击图片预览 2022-04-03 11:14 250阅读 0赞 做微信小程序的时候使用的图片大小不尽相同,为了让使用者能够浏览原图,就需要给图片添加点击预览的功能,下面我详细介绍一下实现步骤, 首先介绍微信小程序文档中的使用教程: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][] 微信小程序官方文档:[https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html?search-key=%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87][https_developers.weixin.qq.com_miniprogram_dev_api_wx.previewImage.html_search-key_E9_A2_84_E8_A7_88_E5_9B_BE_E7_89_87] 下面是我具体实现代码 首先我在wxml中给图片绑定的点击预览事件,以及自定义属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1][] 之后在JS文件重定义了点击事件 //图片点击事件 imgYu: 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链接列表 }) } 以上就是全部代码,下面是我实现的效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3][] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20220403/80fab44763b34eb8af091ad8df974f88.png [https_developers.weixin.qq.com_miniprogram_dev_api_wx.previewImage.html_search-key_E9_A2_84_E8_A7_88_E5_9B_BE_E7_89_87]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html?search-key=%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1]: /images/20220403/1d5e8f329f484da0b0bf000540701825.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2]: /images/20220403/bad1b7952eb24d5896aad72e9f45b45a.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3]: /images/20220403/07f535000a094eac87700eaa410c8f93.png 文章版权声明:注明蒲公英云原创文章,转载或复制请以超链接形式并注明出处。
相关 uni-app点击预览图片 <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi 忘是亡心i/ 2021年07月25日 05:31/ 1 赞/ 844 阅读
相关 微信小程序wx.previewImage预览图片 一.小知识 ![20170525131248116][] 二.例子 1.wxml <view class="container"> <view wx:fo ゞ 浴缸里的玫瑰/ 2021年09月12日 15:30/ 0 赞/ 312 阅读
相关 微信小程序选择图片和预览图片 选择图片 视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage(\{\}) 此方法是用来选择图片的方法,具体使用 素颜马尾好姑娘i/ 2021年09月17日 08:28/ 0 赞/ 335 阅读
相关 微信小程序 实现上传图片并可以预览图片 我的qq 2038373094 我做的是微信小程序、网站、手机app,后端java+前端vue、bootstrap框架、原生的html+css+js都会 做过律师在线咨 刺骨的言语ヽ痛彻心扉/ 2022年01月28日 18:05/ 0 赞/ 204 阅读
相关 微信小程序:点击图片预览 做微信小程序的时候使用的图片大小不尽相同,为了让使用者能够浏览原图,就需要给图片添加点击预览的功能,下面我详细介绍一下实现步骤, 首先介绍微信小程序文档中的使用教程: ![ 妖狐艹你老母/ 2022年04月03日 11:14/ 0 赞/ 251 阅读
相关 微信小程序实现弹窗预览图片 今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章 [微信 梦里梦外;/ 2022年05月28日 18:59/ 0 赞/ 313 阅读
相关 微信图片点击预览 $(function(){ var imgsurl=[]; var nowurl=''; var imgObj=$(".swi 快来打我*/ 2022年06月08日 17:50/ 0 赞/ 234 阅读
相关 微信图片预览 微信公众号开发中,点击查看大图, 其实不需要再写js效果直接调用微信app的预览功能即可 用例: <script> //图片列表 男娘i/ 2022年08月04日 21:47/ 0 赞/ 109 阅读
相关 uni-app点击预览图片 <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi 朴灿烈づ我的快乐病毒、/ 2022年12月02日 08:43/ 0 赞/ 166 阅读
相关 微信小程序点击单个图片进行预览图片,点击预览pdf文件 这里介绍的是单个图片点击预览的,也可以多张,方法差不多 index.wxml <view class="page"> <view class="pag 待我称王封你为后i/ 2022年12月10日 16:55/ 0 赞/ 147 阅读
还没有评论,来说两句吧...