<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. java后台服务器向Nodejs客户端发送压缩包文件

    java代码: Map map=new HashMap(); try { //获取本地文件转换成字符换 File file = new File(apppath);//"D:/upload/ ...

  2. kotlin泛型基本使用

    class box<T> (t :T){ var vlaue =t } fun main(arg: Array<String>) { val box1:box<Int&g ...

  3. ES6重要点学习

    1.解析赋值: let [a,b,c,d,e] = '我是中国人' //我 a = wo let [a,b,c] = 123 // 出错,Numberbu不允许解析不允许解析 2.数据集合Set, m ...

  4. IndemindSDK数据采集程序

    目录 Indemind相机数据采集 Indemind相机数据采集 最近做一些实验需要自己采集一些数据玩玩,打算用之前买的indemind双目模组,实际用的时候感觉官方提供的采集程序不太好用,于是打算自 ...

  5. node.js基础---增删

    官方API文档:http://nodejs.cn/api/fs.html#fs_fs_rmdir_path_callback   在调用node方法中同步有Sync异步没有 //文件系统 //1.引入 ...

  6. [国外] 解决Windows10下google搜索连接不上,但其它网页都能成功登入的问题

    我的电脑突然在学校不能登陆google了,在家可以连接但是非常慢. 在网上搜索发现是由于DNS出了问题,在此记录一下. 可以通过控制面板——网络和Internet——网络和共享中心——点击现在使用的网 ...

  7. axios设置请求头内容

    axios设置请求头中的Authorization 和 cookie 信息: GET请求 axios.get(urlString, { headers: { 'Authorization': 'Bea ...

  8. 【转帖】Linux 桌面进化史

    Linux 桌面进化史 https://www.oschina.net/news/109440/how-linux-desktop-grown 与之前认识到的一样 桌面最开始 是 施乐公司研发的. 后 ...

  9. web前端页面解决中文传参乱码问题

    问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论 ...

  10. Java源码 -- LinkedList

    1.1.LinkedList概述 LinkedList是一种可以在任何位置进行高效地插入和移除操作的有序序列,它是基于双向链表实现的. LinkedList 是一个继承于AbstractSequent ...