微信小程序实现点击图片放大预览


Posted in Javascript onOctober 21, 2019

这个强大的API( wx.previewImage() ),接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤!

思路:

1.点击事件

2.放大

3.左右滑动查看上、下一张

在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了)

index.wxml

<view class='topic_answerImg'>
  
 <block wx:for='{{item.answerImg}}' wx:key='index' wx:for-item='answerItem'>
 <image bindtap='topic_preview' data-id='{{item.id}}' data-url='{{answerItem}}' class='topic_answer_itemImg' src='{{answerItem}}'></image>
 </block>
 
</view>

注意:上面获取的ID是这一组数据的id不是这个图片的id

index.wxss

.topic_answerImg{
 width: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 flex-wrap: wrap;
}
.topic_answer_itemImg{
 width: 210rpx;
 height: 210rpx;
 margin-right: 30rpx;
 margin-bottom: 30rpx;
}
.topic_answer_itemImg:nth-of-type(3n){
 margin-right: 0;
}

index,js

//预览图片
 topic_preview: function(e){
 var that = this;
 var id = e.currentTarget.dataset.id;
 var url = e.currentTarget.dataset.url;
 var previewImgArr = [];
 //通过循环在数据链里面找到和这个id相同的这一组数据,然后再取出这一组数据当中的图片
 var data = that.data.topic_recomData;
 for (var i in data) {
 if (id == data[i].id) {
 previewImgArr = data[i].pic;
 }
 }
 wx.previewImage({
 current: url, // 当前显示图片的http链接
 urls: previewImgArr // 需要预览的图片http链接列表
 })
 },

这样就可以点击图片进行预览。

更多图片处理教程请点击下方专题参考学习:

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

Javascript 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
js校验开始时间和结束时间
May 26 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
vue实现Input输入框模糊查询方法
Jan 29 #Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
vue.js实现左边导航切换右边内容
Oct 21 #Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
vue实现侧边栏导航效果
Oct 21 #Javascript
You might like
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
js检测判断日期大于多少天的方法
2015/05/04 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python实现队列的方法
2015/05/26 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python二维键值数组生成转json的例子
2019/12/06 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
《十六年前的回忆》教学反思
2014/02/14 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2014年双拥工作总结
2014/11/21 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
js判断两个数组相等的5种方法
2022/05/06 Javascript