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. Python--day65--母版和继承的基本使用

  2. JPA多对一单向关联

    在实际开发过程中,JPA多对一单向关联是使用最多的关联方式. 下面是订单与订单项的配置关系. 订单(Order):一的一方,不进行任何配置 @Entity @Table(name="orde ...

  3. Laravel5 call to undefined function openssl cipher iv length() 报错 PHP7开启OpenSSL扩展失败

    在安装laravel5.5后, 访问显示报错. call to undefined function openssl cipher iv length() 经查为php7.1的OpenSSL扩展加载失 ...

  4. P1003 电影票价

    题目描述 已知一位小朋友的电影票价是10元,请问 \(n\) 位小朋友的总票价是多少? 输入格式 输入一个整数 \(n(1 \le n \le 1000)\) , 用于表示小朋友的数量. 输出格式 输 ...

  5. Teleport ultra/IDM(Internet Download Manager)

    神器扒网站——teleport ultra IDM(Internet Download Manager) 在平时的开发或者学习的过程中,我们难免会看到一些让人心动的网站,于是自己想把它搞下来,自己手工 ...

  6. Linux 内核存取 I/O 和内存空间

    一个 PCI 设备实现直至 6 个 I/O 地址区. 每个区由要么内存要么 I/O 区组成. 大部分 设备实现它们的 I/O 寄存器在内存区中, 因为通常它是一个完善的方法(如同在" I/O ...

  7. 关于opencv中cv::Mat设置roi

    opencv中设置roi实验: cv::Mat SrcImg; SrcImg = cv::imread("../resource/cpw3.png"); cv::imshow(&q ...

  8. vue+element-ui实现分页

    我使用得是el-table+el-pagination来实现的, 话不多说,直接上代码 html代码部分 <!-- table --> <el-table :data="s ...

  9. error:cannot load file (code:5555h);bootauto.ini

    最近发现有的网友在使用Ghost XP盘安装系统的时候,选择一键ghost到C盘出现下面的错误: error:cannot load file (code:5555h);bootauto.ini(或b ...

  10. Qt4与Qt3的主要不同

    Qt4与Qt3的主要不同 1)QT4 中提供了大量新控件,虽然它也保持了旧的控件,并命名为Qt3XXX,但是这样的控件没准在今后的哪个QT版本中就不被支持了,所以还是换吧,控件替换的 工作是巨大的,这 ...