WXML:

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

WXSS:

 .imgList{
width: 100%;
}
.imgList .imgList-li{
width: 100%;
}
.imgList .imgList-li .img{
width: 400rpx;
height: 400rpx;
}

JS:

 Page({
data: {
imgArr:[
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
]
},
previewImg:function(e){
console.log(e.currentTarget.dataset.src);
let that = this;
wx.previewImage({
current:e.currentTarget.dataset.src, //当前图片地址
urls: that.data.imgArr, //所有要预览的图片的地址集合 数组形式
})
}
})

微信小程序点击图片放大的更多相关文章

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

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

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

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

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

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

  4. 微信小程序点击图片预览-wx.previewImage

    <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...

  5. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  6. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  7. 微信小程序之裁剪图片成圆形

    前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主 ...

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

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

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

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

随机推荐

  1. java方法特点

    它可以实现独立的功能; 必须定义在类里面; 它只有被调用才会执行; 它可以被重复使用; 方法结束后方法里的对象失去引用; 如何定义一个功能,并通过方法体现出来: ① 明确该功能运算后的结果.明确返回值 ...

  2. [转]VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)

    源码地址:https://github.com/YANGKANG01/Spring-Boot-Demo 安装扩展 安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven.spr ...

  3. springboot整合mybatis完整示例, mapper注解方式和xml配置文件方式实现(我们要优雅地编程)

    一.注解方式 pom <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId& ...

  4. 【mac】Mac 终端如何切换成管理员用户

    方法1.打开终端输入 sudo su  然后回车 Password:  ------(输入root密码即可) sh-3.2# --------    (输入执行的命令即可,例如 npm i -g np ...

  5. ESB总线的核心架构

    根据近期对开源ESB产品的研究,已经对Oracle和Tibco的ESB总线产品的实施经验积累,对ESB总线的核心产品架构有了进一步的清晰认识,将ESB的核心架构整理为上图,上图中看到的内容也是做为一款 ...

  6. CSS多余文本省略号显示

    CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...

  7. IDEA 创建普通的maven+java项目(入门)

    配置IDEA2017,maven3.5.2 ,Java1.8 其实大部分的IDEA都差不多,不用纠结版本之前的差异. 第一步:File-->New-->Project 第二步:出现new ...

  8. css属性object-fit

    object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框. 属性值 contain:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比. 整个对象在填充盒子 ...

  9. RobotFramework+Appium 升级Appium v1.10.0后,执行click element时报错:InvalidSelectorException: Message: Locator Strategy 'css selector' is not supported for this session,解决办法

    报错信息如下: debug] [35m[XCUITest][39m Connection to WDA timed out[debug] [35m[XCUITest][39m Connection t ...

  10. ELK学习实验001:Elastic Stack简介

    1 背景介绍 在我们日常生活中,我们经常需要回顾以前发生的一些事情:或者,当出现了一些问题的时候,可以从某些地方去查找原因,寻找发生问题的痕迹.无可避免需要用到文字的.图像的等等不同形式的记录.用计算 ...