<view class='imgList'>
<view class='imgList-li' wx:for='{{imgArr}}'>
<image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>
</view>
</view>
Page({

  /**
* 页面的初始数据
*/
data: {
imgArr:[
'http://bpic.jpg',
'http://bpic.jpg',
'http://bpic.jpg',
'http://bpic.jpg'
]
},
previewImg:function(e){
  let _this = this
  //图片预览
wx.previewImage({
current:_this.imgArr[0] , // 当前显示图片的http链接
urls: _this.imgList // 需要预览的图片http链接列表
})
 } })

微信小程序点击图片预览-wx.previewImage的更多相关文章

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

    拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数

  2. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

  3. 微信小程序——网盘图片预览

    微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...

  4. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  5. 小程序图片预览 wx.previewImage

      list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg', 'http://i ...

  6. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  7. 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览

    本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...

  8. 微信小程序点击图片全屏

    作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...

  9. 小程序 canvas实现图片预览,图片保存

    wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...

随机推荐

  1. SQL-W3School-基础:SQL DISTINCT 语句

    ylbtech-SQL-W3School-基础:SQL DISTINCT 语句 1.返回顶部 1. 本章讲解 SELECT DISTINCT 语句. SQL SELECT DISTINCT 语句 在表 ...

  2. Flask之加载静态资源

    Flask之加载静态资源 1.加载css样式 <link rel="stylesheet" href="{{ url_for('static',filename=' ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_13-webpack研究-webpack入门程序

    创建webpack测试的目录 定义webpack的入口文件 mdel01必须导出,main里面才能导入 导出多个 数组的写法 main是入口文件,里面已经引入了vue.min和model01.js   ...

  4. 图解 HTTP 笔记(三)—— HTTP 报文内的 HTTP 信息

    本章主要讲解请求和响应是如何运作的 一.HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文,客户端的 HTTP 报文叫做请求报文,服务器端的叫做响应报文. HTTP 报文大致可分为报 ...

  5. 反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段

    反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段

  6. Python实现的选择排序算法原理与用法实例分析

    Python实现的选择排序算法原理与用法实例分析 这篇文章主要介绍了Python实现的选择排序算法,简单描述了选择排序的原理,并结合实例形式分析了Python实现与应用选择排序的具体操作技巧,需要的朋 ...

  7. ubuntu 18.04设置开机自动挂载移动硬盘

    首先在命令行执行df -h指令,可以看到如下结果: zifeiy@zifeiy-PC1:~$ df -h 文件系统 容量 已用 可用 已用% 挂载点 udev 964M 0 964M 0% /dev ...

  8. iOS-保存图片到相册

    //保存      UIButton *saveBtn = [[UIButton alloc] init];    //    saveBtn.frame = CGRectMake((screenWi ...

  9. 《剑指offer》树专题 (牛客10.25)

    考察的知识点主要在于树的数据结构(BST,AVL).遍历方式(前序,中序,后序,层次).遍历算法(DFS,BFS,回溯)以及遍历时借助的数据结构如队列和栈.由于树本身就是一个递归定义的结构,所以在递归 ...

  10. nginx passwd (http://www.voidcn.com/article/p-suebfyqy-nx.html)

    操作系统CentOS 7.2 nignx 1.10.1 首先我们用Nginx提供HTTP的Basic Auth功能,配置了需要输入的用户名和密码,才能访问网站. 我们使用htpasswd来生成密码信息 ...