小程序图片预览 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代码 ...
随机推荐
- 注意vue-router嵌套路由的问题:子路由组件中的class名和本组件页面的class名相同时,子路由组件的样式被覆盖。
注意vue-router嵌套路由的问题:子路由组件中的class样式被覆盖,当需要用到路由嵌套时,clas命名时注意不要相同. 点击查看上一篇vue-router嵌套路由具体 例子: 子路由a组件中: ...
- SpringBoot项目构建、测试、热部署、配置原理、执行流程
SpringBoot项目构建.测试.热部署.配置原理.执行流程 一.项目构建 二.测试和热部署 三.配置原理 四.执行流程
- CSS 的伪元素是什么?
CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...
- [模板] 计算几何2: 自适应Simpson/凸包/半平面交/旋转卡壳/闵可夫斯基和
一些基本的定义在这里: [模板] 计算几何1(基础): 点/向量/线/圆/多边形/其他运算 自适应Simpson Simpson's Rule: \[ \int ^b_a f(x)dx\approx ...
- pycharm代码无法自动补全
今天写代码时,突然pycharm代码无法自动补全了,经查找后,解决方案如下: 将python 和 spelling 选中即可 后续:当刚打开pycharm时,出现下面的进度条,代码补全功能完好:但是当 ...
- Vue页面刷新方法(子组件改变数据后兄弟组件刷新,不闪烁)
todo https://blog.csdn.net/qq_40571631/article/details/91533248
- sqli-labs(5)
双查询注入 0x01爱之初了解 在第一次接触到双查询注入时 肯定会有很多问题 在这里我们先了解一下什么叫做 双查询注入 他的语法结构 以及为什么这样构造 答:在此之前,我们理解一下子查询,查询的关键字 ...
- sqli-libs(2)
Lesson2:数字型注入我们先来测试一下 http://127.0.0.1/sql1/Less-2/?id=1%20and%201=1 发现未报错 这里知道我们的数字型注入是不需要 进行单引号闭合的 ...
- 文件和Stream
I/O和文件 输入/输出(I/O)就是在内存和外部设备之间复制数据的过程.输入(input)就是从I/O设备复制数据到内存,输出(output)就是从内存复制数据到I/O设备. 一个文件可以理解成一串 ...
- TCP层bind系统调用的实现分析
说明:该文章中部分代码未能完全理解透彻,可能对您造成误解,请慎读: 并建议您先阅读本博另外一篇文章:<Linux TCP套接字选项 之 SO_REUSEADDR && SO_RE ...