WXML:

  1. <view class='imgList'>
  2. <view class='imgList-li' wx:for='{{imgArr}}'>
  3. <image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image>
  4. </view>
  5. </view>

WXSS:

  1. .imgList{
  2. width: 100%;
  3. }
  4. .imgList .imgList-li{
  5. width: 100%;
  6. }
  7. .imgList .imgList-li .img{
  8. width: 400rpx;
  9. height: 400rpx;
  10. }

JS:

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

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

  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. 谷歌浏览器中kindeditor编译器字体不能为微软雅黑的问题?

    https://segmentfault.com/q/1010000006204144 比如说用谷歌浏览器打开后台编译文章,在文章先选择字体为微软雅黑,再编辑其他,哪个字体就变成了&quot: ...

  2. Python--day22--面向对象的交互

    Python里面自带的类和对象: 类名的作用: 类里面的与属性相关的对象self的运用: 实例化:就是创建一个对象 调用方法,类名.方法名(对象名) 执行步骤: 简写:alex.walk()等价于Pe ...

  3. Bi-LSTM-CRF for Sequence Labeling

    做了一段时间的Sequence Labeling的工作,发现在NER任务上面,很多论文都采用LSTM-CRFs的结构.CRF在最后一层应用进来可以考虑到概率最大的最优label路径,可以提高指标. 一 ...

  4. Codeforces Round #194 (Div.1 + Div. 2)

    A. Candy Bags 总糖果数\(\frac{n^2(n^2+1)}{2}\),所以每人的数量为\(\frac{n}{2}(n^2+1)\) \(n\)是偶数. B. Eight Point S ...

  5. 查看php-fpm的进程和端口号

    ps -ef | grep php-fpm   查看php-fpm所有的进程 ps -ef | grep php-fpn.conf 查看配置所在路径 netstat -lntp 查看监听端口  lis ...

  6. 2018-2-13-win10-uwp-InkCanvas控件数据绑定

    title author date CreateTime categories win10 uwp InkCanvas控件数据绑定 lindexi 2018-2-13 17:23:3 +0800 20 ...

  7. JQ绑定事件的叠加和解决,index()方法的坑

    JQ绑定事件的叠加和解决,index()方法的坑 前言 在做过几个不大不小的项目后,发现技术这种东西,必须要多多实践,才能发现各种问题,理论的知识掌握的再好终究是纸上谈兵. 因此目前感觉有两点是必须要 ...

  8. 螺旋矩阵O(1)根据坐标求值

    传送门 洛谷2239 •题意 从矩阵的左上角(第11行第11列)出发,初始时向右移动: 如果前方是未曾经过的格子,则继续前进,否则右转: 重复上述操作直至经过矩阵中所有格子. 根据经过顺序,在格子中依 ...

  9. 学习Java第三周

    这是学习java的第三周 上周想要学习的这周也完成了,研究和测试代码花费了大约2个小时,发现这些内容方法居多,想要熟练掌握就要好好记忆了 包装类 数字处理类 Object类 Java类包 内部类 下一 ...

  10. JLINK、ULINK和STlink仿真器详解

    JLink仿真器 德国SEGGER公司推出基于JTAG的仿真器.简单地说,是给一个JTAG协议转换盒,即一个小型USB到JTAG的转换盒,其连接到计算机用的是USB接口,而到目标板内部用的还是jtag ...