小程序图片预览 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代码 ...
随机推荐
- PyPy初体验
PyPy初体验 PyPy安装 1.下载 下载地址:http://pypy.org/download.html(温馨提示:需要梯子) 下载PyPy3.6 64bit Ubuntu版本 解压 下载下来的文 ...
- JavaScript 正则表达式——预定义类,边界,量词,贪婪模式,非贪婪模式,分组,前瞻
㈠预定义类 示例:匹配一个ab+数字+任意字符的字符串:ab\d. ㈡边界 正则表达式常用的边界匹配字符 ⑴示例1:第一个是没写单词边界 第二个是加上字符边界的效 ...
- C# 4.0
序言 动态绑定-dynamic class Program { static void Main(string[] args) { ; ; // Rest the mouse pointer over ...
- 51 Nod 阶乘后面0的数量
1003 阶乘后面0的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 72 ...
- POJ 3352 Road Construction 中一个结论的证明
题面 分析: 很多人都给出了做法,在这里不赘述.大概就是先把桥找出来,然后边双缩点,最后统计新图上的度数.因为缩点后为一棵树,所以度数为1(即为叶子)的点的数目+1再除以2下取整就是答案. 这里主要证 ...
- django + jquery 实现二级联动
二级联动用ajax还是很好实现的,下面简单给个例子 jquery代码 $("#id_sel").change(function(){ $.get("/browser/ge ...
- Spring-data-redis 第一天
1.Redis 这就不必哆嗦了,Redis 支持丰富的数据类型,String ,List,Sets ,Sorted Sets,Hashes,这就可以看出Java 操作Redis就要针对各种类型都有自己 ...
- 自定义IPython提示符
首先创建IPython的自定义配置文件 $ ipython profile create 可以看到在HOME目录下: 多了两个配置文件 我们修改~/.ipython/profile_default/i ...
- plsql developer连接数据库时出现ORA-01033错误的解决方法
1.首先以管理员的身份登录本地数据库:sqlplus "/as sysdba"如下图: 2.卸载数据: shutdown normal 3. 重新装 ...
- Python学习笔记:字典型的数据结构
根据书上的定义,字典是将数据与键相关联,这个键相当于是一组数据的一个名称,键必须是唯一的. python中提供了内置的映射类型--字典.映射其实就是一组key和value以及之间的映射函数,其特点是: ...