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


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 相关文章推荐
图片完美缩放
Sep 07 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
微信小程序修改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邮件群发机实现代码
2016/02/16 PHP
php显示页码分页类的封装
2017/06/08 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
js中document.write的那点事
2014/12/12 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
深入理解python多进程编程
2016/06/12 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
投标服务承诺书
2014/05/28 职场文书
关于运动会的口号
2014/06/07 职场文书
药店促销活动总结
2014/07/10 职场文书
经典毕业生求职信
2014/07/12 职场文书
化学工程专业求职信
2014/08/10 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python