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


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 类似flash效果的立体图片浏览器
Feb 08 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
详解JavaScript常量定义
Jan 03 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 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/07/19 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php 面向对象的一个例子
2011/04/12 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
基于python实现生成指定大小txt文档
2020/07/20 Python
Python grpc超时机制代码示例
2020/09/14 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
初中美术教学反思
2014/01/29 职场文书
奥利奥广告词
2014/03/20 职场文书
食品安全处置方案
2014/06/14 职场文书
班级课外活动总结
2014/07/09 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
教师读书笔记
2015/06/29 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书