微信小程序点击图片放大
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, //所有要预览的图片的地址集合 数组形式
- })
- }
- })
微信小程序点击图片放大的更多相关文章
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- 微信小程序-点击图片预览
拿接口 有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数
- 微信小程序点击图片预览-wx.previewImage
<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序之裁剪图片成圆形
前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主 ...
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- 微信小程序——网盘图片预览
微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...
随机推荐
- 谷歌浏览器中kindeditor编译器字体不能为微软雅黑的问题?
https://segmentfault.com/q/1010000006204144 比如说用谷歌浏览器打开后台编译文章,在文章先选择字体为微软雅黑,再编辑其他,哪个字体就变成了": ...
- Python--day22--面向对象的交互
Python里面自带的类和对象: 类名的作用: 类里面的与属性相关的对象self的运用: 实例化:就是创建一个对象 调用方法,类名.方法名(对象名) 执行步骤: 简写:alex.walk()等价于Pe ...
- Bi-LSTM-CRF for Sequence Labeling
做了一段时间的Sequence Labeling的工作,发现在NER任务上面,很多论文都采用LSTM-CRFs的结构.CRF在最后一层应用进来可以考虑到概率最大的最优label路径,可以提高指标. 一 ...
- 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 ...
- 查看php-fpm的进程和端口号
ps -ef | grep php-fpm 查看php-fpm所有的进程 ps -ef | grep php-fpn.conf 查看配置所在路径 netstat -lntp 查看监听端口 lis ...
- 2018-2-13-win10-uwp-InkCanvas控件数据绑定
title author date CreateTime categories win10 uwp InkCanvas控件数据绑定 lindexi 2018-2-13 17:23:3 +0800 20 ...
- JQ绑定事件的叠加和解决,index()方法的坑
JQ绑定事件的叠加和解决,index()方法的坑 前言 在做过几个不大不小的项目后,发现技术这种东西,必须要多多实践,才能发现各种问题,理论的知识掌握的再好终究是纸上谈兵. 因此目前感觉有两点是必须要 ...
- 螺旋矩阵O(1)根据坐标求值
传送门 洛谷2239 •题意 从矩阵的左上角(第11行第11列)出发,初始时向右移动: 如果前方是未曾经过的格子,则继续前进,否则右转: 重复上述操作直至经过矩阵中所有格子. 根据经过顺序,在格子中依 ...
- 学习Java第三周
这是学习java的第三周 上周想要学习的这周也完成了,研究和测试代码花费了大约2个小时,发现这些内容方法居多,想要熟练掌握就要好好记忆了 包装类 数字处理类 Object类 Java类包 内部类 下一 ...
- JLINK、ULINK和STlink仿真器详解
JLink仿真器 德国SEGGER公司推出基于JTAG的仿真器.简单地说,是给一个JTAG协议转换盒,即一个小型USB到JTAG的转换盒,其连接到计算机用的是USB接口,而到目标板内部用的还是jtag ...