小程序图片预览 wx.previewImage

list: [
'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg',
'http://img.52z.com/upload/news/image/20180312/20180312060838_67790.jpg',
], // 如果用了wepy的话
<swiper-item v-for="item in list">
<image :src="item" class="slide-image" data-list="{{list}}" data-src="{{item}}" style="width:100%; height:276rpx;" @tap="previewImage"/>
</swiper-item> // 原始小程序 data-list : 所有预览图片; data-src: 当前预览图片
<swiper-item wx:for="{{list}}" wx:for-item="item">
<image :src="item" class="slide-image" data-list="{{list}}" data-src="{{item}}" style="width:100%; height:276rpx;" @tap="previewImage"/>
</swiper-item> methods: {
previewImage: function (e) {
var src = e.currentTarget.dataset.src; // 获取data-src
var imgList = e.currentTarget.dataset.list; // 获取data-list
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList, // 需要预览的图片http链接列表
success: function(res) {
console.log('success');
},
fail: function(res) {
console.log('fail');
},
})
}
},
wx.previewImage 不支持本地图片预览,只支持http或https链接图片
小程序图片预览 wx.previewImage的更多相关文章
- 微信小程序点击图片预览-wx.previewImage
<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...
- 微信小程序-图片预览
仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...
- TODO:小程序手机预览调试
TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...
- Wx-小程序-图片预览、保存
点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...
- 微信小程序手机预览请求不到数据(最后一条不明所以)
本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...
- 微信小程序H5预览页面框架(二维码不隐藏)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序H5预览页面框架
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序,预览在开发工具上显示正常,手机预览二维码报request->fail错误,打开手机的调试功能又正常。
这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...
- 微信小程序图片放大预览
需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...
随机推荐
- windows脚本复制文件(将u盘文件复制到固定路径)
@echo off for /f "tokens=2 delims==" %%a in ('wmic LogicalDisk where "VolumeName='Hel ...
- 【SQL-不重复插入】一条语句实现,插入不重复的记录到数据库
Insert新纪录时,先查询SQL数据库中是否存在相同记录,如果存在,则不插入. if not exists(select count(*) from [Admin] where Name='adm ...
- jQuery_完成表单注册检验
在校验表单的时候会很麻烦,但是jq可以用很简单的方法来检验,即使用validate. 原表单: 代码 <!DOCTYPE html> <html> <head> & ...
- Jmeter(三) 从上传图片来入门Jmeter
用Jmeter上传用户头像到人人网 先用抓包工具Fiddler把上传操作的报文抓取下来 开启Jmeter,在测试计划中创建一个线程组,取名为“图片上传” 再在线程组中创建一个HTTP请求 在请求报文中 ...
- Spark-PySpark sql各种内置函数
_functions = { 'lit': 'Creates a :class:`Column` of literal value.', 'col': 'Returns a :class:`Colum ...
- [CSP-S模拟测试]:开心的金明(贪心+模拟)
题目传送门(内部题117) 输入格式 第一行一个整数$k$,表示需要处理的月份数. 接下来的$k$行,每行$4$个整数,第$1+i$行分别为:$c_i,d_i,m_i,p_i$ 接下来的$k-1$行, ...
- 利用Zookeeper实现分布式锁
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 2019Java第十三周课程总结
这周主要是学习了监听器还有制作记事本,主要可以由一下代码来体现 监听器 实验代码 package text12; import java.awt.Container; import java.awt. ...
- SecureCRT For Mac安装、破解、使用详细总结
转:https://blog.csdn.net/so_geili/article/details/83315852#_4 https://www.sednax.com/download.php
- 一起学vue指令之v-html
一起学vue指令之v-html 一起学 vue指令 v-html 指令可看作标签属性 某些情况下,我们点击百度搜索下一页,服务器应该就返回下一页的数据页面,包含其他资源链接等. 返回的数据的本质是一 ...