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. 【leetcode】1187. Make Array Strictly Increasing

    题目如下: Given two integer arrays arr1 and arr2, return the minimum number of operations (possibly zero ...

  2. Python之基于十六进制判断文件类型

    核心代码: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Author : suk import struct from io import Byt ...

  3. 一次linux站点安装经验

    之前了解了一点,刚过完年回来,顺便研究了一下小程序. http://s.w7.cc/index.php?c=wiki&do=view&id=1&list=84 先申请了一个li ...

  4. layui的数据表格加上操作

    数据表格加上操作. <script type="text/html" id="barDemo"> <a class="layui-b ...

  5. C# 两个进程之间通讯(管道通信 )

    #region  客户端        NamedPipeClientStream pipeClient =        new NamedPipeClientStream("localh ...

  6. 文件操作:fopen()

    r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在.   rb+ 读写打开一个二进制文件,只允许读写数据. rt+ 读写打开一个文本文件,允许读和写.    w 打开只写文件, ...

  7. 使用VSCODE开发UE4

    完全可行,速度很快,智能提示.代码格式化.查找Symbol等等都不比VS+Visual AssistX 差. 准备 打开编辑器的Editor Preferences>Source Code,选择 ...

  8. R_Studio(癌症)数据连续属性离散化处理

    对“癌症.csv”中的肾细胞癌组织内微血管数进行连续属性的等宽离散化处理(分为3类),并用宽值找替原来的值 癌症.csv setwd('D:\\data') list.files() dat=read ...

  9. R_Studio读取xls文件

    百度经验 传送门 需要包xlsx 依赖包rjava 需要安装java编译环境 在R Console中执行命令install.packages("rjava"),install.pa ...

  10. Java字符串的替换(replace()、replaceFirst()和replaceAll())

    在 Java 中,String 类提供了 3 种字符串替换方法,分别是 replace().replaceFirst() 和 replaceAll(),本文将详细介绍它们的使用方法. replace( ...