微信小程序点击图片放大
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.从这 ...
随机推荐
- landi pos机
2015年3月:联迪商用获得2014-2015中国金融POS机市场年度成功企业奖: 2014年5月:联迪商用入选2013年福州市纳税百强企业: 2013年12月:联迪商用入选2013年度中国电子商务物 ...
- 彻底弄懂slice和splice的区别
总觉得数组和字符串中的一些方法的使用很难记,可能是日常都是在学理论,缺少实际应用.不多说了,继续学习吧! 一句话先提前概括: slice(start,end) 从哪到哪开始删 splice(strt, ...
- javascript修改css样式表
//创建var sheet=document.createElement('style');document.bodt.appendChild(sheet);sheet.styleSheet.cssT ...
- sqlyog提示:没有执行查询。请在 SQL 窗口中输入查询或将光标放在一个查询上。
以下内容纯属猜测: sqlyog 在执行输入的sql语句时,对已经执行过的语句,是不会再执行的,所以出现这个问题,很可能是sql语句没有修改,就试图执行第二遍.
- 牛客多校第四场sequence C (线段树+单调栈)
牛客多校第四场sequence C (线段树+单调栈) 传送门:https://ac.nowcoder.com/acm/contest/884/C 题意: 求一个$\max {1 \leq l \le ...
- java 如何重写equals
java中重写equals表面上看只涉及equals与hashCode两个方法,但如果仔细考虑发现重写一个逻辑完整的equals并不容易,需要考虑克隆,继承(多态)等问题,下面是最近的几点心得 1.先 ...
- 通过Servlet生成验证码图片(转)
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:
- springcloud玩转单点登录【oauth】
随着公司项目的庞大,单点登录变得尤为重要,那么怎么实现单点登录,下面已oauth为标准实现单点登录. [特别鸣谢:魔乐科技,附上官网:www.mldn.cn] 1:项目组织结构 本项目为oAuth修改 ...
- CPP STL学习笔记
STL的概念 源地址 https://www.ev0l.art/index.php/archives/15/ <li> Iterator (迭代器)<li> Containe ...
- Mac常用的软件推荐
Alfred 效率软件,让能更快的启动各种软件 VScode 编辑器,市面上最热的编辑器,好用的不只是一点点,加上Vim插件简直就是秒杀市面上各种IDE PicGo 一个开源图床软件,支持各大网站的图 ...