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


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获取字符出现次数的代码
Mar 22 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
viewer.js实现图片预览功能
Jun 24 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 curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
angularjs路由传值$routeParams详解
2020/09/05 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Python二分查找详解
2015/09/13 Python
python实现简易版计算器
2020/06/22 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
询价采购方案
2014/06/09 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
导游词之介休绵山
2019/12/31 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang