<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. redhat 7.6下如何更新YUM源(仓库)?

    1. 安装epel-release     yum install epel-release 2. 安装webstatic-release     rpm -Uvh https://mirror.we ...

  2. java中 label 配合 break continue 使用方法

    转 https://www.jianshu.com/p/7954b61bc6ee java中 label 配合 break continue 使用的其实是比较少的. 这种做法在业务代码中比较少见. 在 ...

  3. python核心模块方法

    ********************os模块: os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有 ...

  4. mfc判断当前程序是否正在运行

    HANDLE hMutex = CreateMutex(NULL,TRUE,_T("appName")); if(hMutex) { if(ERROR_ALREADY_EXISTS ...

  5. [ML] Roadmap: a long way to go

    看上去不错的博文: 机器学习的经典算法一览 (一) 机器学习的经典算法一览 (二)       1.引言 正文将详细介绍传统机器学习算法,基本思想和用途.把问题解决思路和方法应用建议提前到这里的想法也 ...

  6. tomcat 8.xxx ssl使用websocket Failed to close the ServletOutputStream connection cleanly

    报错: 2019-09-17 10:30:17.277 default [https-jsse-nio-8110-exec-20] INFO o.a.t.w.s.WsRemoteEndpointImp ...

  7. vs 扩展和更新下载的插件在什么位置呢,看看吧,哈哈

    C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\10.0\Extensions,注意哈,这个AppData是隐藏的哟,要显示才能 ...

  8. Linux使用mount挂载Windows共享文件夹

    https://blog.csdn.net/tojohnonly/article/details/71374984 https://github.com/tojohnonly 现实中会有这样的场景 , ...

  9. android之Framework问题总结:

    移动开发知识体系总章(Java基础.Android.Flutter) Android Handler消息机制 . Android中为什么主线程不会因为Looper.loop里的无限循环ANR? 1.1 ...

  10. CSS - clearfix清除浮动

    首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...