微信小程序之wx.previewImage图片预览(单张图片预览)

wxml部分代码如下:

<view class="wehx-card_goods" wx:for="{{list}}" wx:key="*this"><image class="goods_img" src="{{item.url}}" data-src="{{item.url}}" bindtap="previewImage"></image>
</view>

js部分代码如下:

 data: {list: [{name: '商品0',url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"}, {name: '商品1',url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"}, {name: '商品2',url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"}, {name: '商品3',url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"}, {name: '商品4',url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"}, {name: '商品5',url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"}],},// 单张图片预览previewImage:function(e){let picture = e.currentTarget.dataset.src;wx.previewImage({current: picture, // 当前显示图片的http链接urls: [picture], // 需要预览的图片http链接列表  ===重中之重===})}

注意：
1.在此实例中，每个item对象中只有一个图片
2.urls的参数是Array
3. urls: [图片链接]可以将字符串类型的地址转化成符合要求的数组类型

微信小程序之wx.previewImage图片预览(单张图片预览)相关推荐

微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常(转)...
问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能 ...
微信小程序之wx.previewImage图片预览(多张图片预览)
wxml部分代码如下: <block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'><i ...
微信小程序的wx.chooseImage如何把图片传给后端
微信小程序的wx.chooseImage如何把图片传给后端首选wx.chooseImage的用法先见官方文档 => wx.chooseImage 这个的返回值如下↓ 这里可以看到这个temp ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序遍历wx:for,wx:for-item,wx:key
微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档解决方法在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
微信小程序的wx:for和vue的v-for
写代码的时候,微信小程序的wx:for和vue的v-for,有点搞混了,所以特意举个简单的例子(todos)来区分下. 微信小程序 index.wxml <view class="li ...

微信小程序之wx.previewImage图片预览(单张图片预览)

微信小程序之wx.previewImage图片预览(单张图片预览)相关推荐

最新文章

热门文章

微信小程序 之wx.previewImage图片预览(单张图片预览)

微信小程序 之wx.previewImage图片预览(单张图片预览)相关推荐

最新文章

热门文章

微信小程序之wx.previewImage图片预览(单张图片预览)

微信小程序之wx.previewImage图片预览(单张图片预览)相关推荐