微信小程序如何实现点击图片放大功能


Posted in Javascript onJanuary 21, 2020

这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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,        //所有要预览的图片的地址集合 数组形式
  })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 #Javascript
微信小程序全选多选效果实现代码解析
Jan 21 #Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 #Javascript
浅谈Vue.use到底是什么鬼
Jan 21 #Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 #Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 #Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 #Javascript
You might like
php一些公用函数的集合
2008/03/27 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
Prototype Array对象 学习
2009/07/19 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python算的上脚本语言吗
2020/06/22 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
学校安全生产承诺书
2014/05/23 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
先进工作者个人总结
2015/02/15 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle