1.  

  1. list: [
  2. 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg',
  3. 'http://img.52z.com/upload/news/image/20180312/20180312060838_67790.jpg',
  4. ],
  5.  
  6. // 如果用了wepy的话
  7. <swiper-item v-for="item in list">
  8. <image :src="item" class="slide-image" data-list="{{list}}" data-src="{{item}}" style="width:100%; height:276rpx;" @tap="previewImage"/>
  9. </swiper-item>
  10.  
  11. // 原始小程序 data-list : 所有预览图片; data-src: 当前预览图片
  12. <swiper-item wx:for="{{list}}" wx:for-item="item">
  13. <image :src="item" class="slide-image" data-list="{{list}}" data-src="{{item}}" style="width:100%; height:276rpx;" @tap="previewImage"/>
  14. </swiper-item>
  15.  
  16. methods: {
  17. previewImage: function (e) {
  18. var src = e.currentTarget.dataset.src; // 获取data-src
  19. var imgList = e.currentTarget.dataset.list; // 获取data-list
  20. wx.previewImage({
  21. current: src, // 当前显示图片的http链接
  22. urls: imgList, // 需要预览的图片http链接列表
  23. success: function(res) {
  24. console.log('success');
  25. },
  26. fail: function(res) {
  27. console.log('fail');
  28. },
  29. })
  30. }
  31. },
  1. wx.previewImage 不支持本地图片预览,只支持httphttps链接图片

小程序图片预览 wx.previewImage的更多相关文章

  1. 微信小程序点击图片预览-wx.previewImage

    <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...

  2. 微信小程序-图片预览

    仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...

  3. TODO:小程序手机预览调试

    TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...

  4. Wx-小程序-图片预览、保存

    点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...

  5. 微信小程序手机预览请求不到数据(最后一条不明所以)

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  6. 微信小程序H5预览页面框架(二维码不隐藏)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 微信小程序H5预览页面框架

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 微信小程序,预览在开发工具上显示正常,手机预览二维码报request->fail错误,打开手机的调试功能又正常。

    这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...

  9. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

随机推荐

  1. IPC 进程间通信方式——管道

    进程间通信概述 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几兆字节之间 共享数据:多个进程想要操作共享数据,一个进程对共享数据的修改,别的进程应该立刻看到. 通知时间: ...

  2. Struts2基本原理【转】

    阐述struts2的执行流程. Struts 2框架本身大致可以分为3个部分:核心控制器FilterDispatcher.业务控制器Action和用户实现的企业业务逻辑组件. 核心控制器FilterD ...

  3. 【leetcode】1271. Hexspeak

    题目如下: A decimal number can be converted to its Hexspeak representation by first converting it to an ...

  4. SAP Diagnostics Agent无法启动

    [问题]SAP Diagnostics Agent无法启动. [现象]Diagnostics Agent安装并没有发生错误,但是打开SAPMMC,Diagnostics Agent(DAA)的Inst ...

  5. git branch查看不到分支的名字解决办法

    git branch查看不到分支的名字解决办法 <!-- 1. 先初始化 --> git init; <!-- 2. 接着创建瑶瑶的专属分支 --> git checkout ...

  6. python学习之路(3)

    字符串和编码 因为python最早只支持ASCII编码普通的字符串'ABC'在Python内部都是ASCII编码的.Python提供了ord()和chr()函数,可以把字母和对应的数字相互转换 后来p ...

  7. python学习之路(14)

    通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后面绝大多数元素 ...

  8. [CSP-S模拟测试]:硬币(博弈论+DP+拓展域并查集)

    题目传送门(内部题135) 输入格式 第一行包含一个整数$T$,表示数据组数. 对于每组数据,第一行两个整数$h,w$,表示棋盘大小. 接下来$h$行,每行一个长度为$w$的字符串,每个位置由为$o, ...

  9. 分布式-信息方式-ActiveMQ基础

    ActiveMQ简介 ActiveMQ是什么ActiveMQ是Apache推出的,一款开源全支持JMS.1和J2EE1.4范的JMS Provider实现的信息中间件.(message oriente ...

  10. C++入门经典-例6.2-将二维数组进行行列对换

    1:一维数组的初始化有两种,一种是单个逐一赋值,一种是使用聚合方式赋值.聚合方式的例子如下: int a[3]={1,2,3}; int a[]={1,2,3};//编译器能够获得数组元素的个数 in ...