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


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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
详解vue组件之间的通信
Aug 30 Javascript
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中的日期及时间
2006/11/23 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
js异或加解密效果代码
2008/06/25 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
初级Java程序员面试题
2016/03/03 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
学习新党章思想汇报
2014/01/09 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
开会通知短信大全
2015/04/20 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
vue 实现上传组件
2021/05/31 Vue.js
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Django框架模板用法详解
2022/06/10 Python