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的更多相关文章

  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】740. Delete and Earn

    题目如下: Given an array nums of integers, you can perform operations on the array. In each operation, y ...

  2. C# 转json

    #region MyRegion StringBuilder sb = new StringBuilder(); sb.Append("{"); foreach (System.R ...

  3. ZeroMQ+QT 字符串收发

    结合 Zeromq API函数 与 Qt 字符串QString QByteArray 实现字串收发: 发送端: zmq_msg_t msg; QString strT = “ABC汉字123”: QB ...

  4. 上一个树形菜单的改进,增添了数据绑定功能而非仅仅的jq特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. sqli-labs(4)

    sqli-libs(4)通关过程 0x01爱之初体验 首先我们进行注入试探 发现我们的单引号 回显事正常的 双引号回显反而是错误的 查看源码我们发现 多了一个给id赋值的语句 我们在php上面执行一下 ...

  6. SpringBoot启动时的Banner设置

    Spring Boot程序启动的时候输出的由字符组成的Spring符号并不陌生.这个是Spring Boot为自己设计的Banner: 1. 第一种方式:修改的时候,进行设置,在Application ...

  7. linux监控系统性能命令

    Linux系统性能10条命令监控 https://www.cnblogs.com/qmfsun/p/5729442.html 概述 通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. ...

  8. jpa repostiory

    JpaRepository的查询   image.png   image.png Spring Data JPA框架在进行方法名解析时,会先把方法名多余的前缀截取掉,比如 find.findBy.re ...

  9. spring eclipse xml自动提示

    window -> preferences -> XML -> XML Catalog -> 在User Specified Entries新增加一个catalog

  10. ActiveMQ 初学-1:ActiveMQ 创建连接对象

      县创建mq的连接工厂对象 ActiveMQConnectionFactory   // 1 建立ConnectionFactory 工厂对象,需要填入,需要填入用户名密码, // 用户名 密码 在 ...