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


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 相关文章推荐
再论Javascript的类继承
Mar 05 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
关于延迟加载JavaScript
May 05 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
jQuery中extend函数详解
Jul 13 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
js this 绑定机制深入详解
Apr 30 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python批量生成条形码的示例
2020/10/10 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
安全生产责任书范本
2014/04/15 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年信用社工作总结
2014/11/25 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
三八节祝酒词
2015/08/11 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL