微信小程序实现图片放大预览功能


Posted in Javascript onOctober 22, 2020

需求:当点击图片时,当前图片放大预览,且可以左右滑动

微信小程序实现图片放大预览功能

实现方式:使用微信小程序图片预览接口

微信小程序实现图片放大预览功能

我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中

wxml代码:

<!--图片描述-->
 <view wx:if="{{item.pictures}}" class="list-dImg">
 <image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
 </view>

js代码:

//图片点击事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//获取data-src
 var imgList = event.currentTarget.dataset.list;//获取data-list
 //图片预览
 wx.previewImage({
 current: src, // 当前显示图片的http链接
 urls: imgList // 需要预览的图片http链接列表
 })
 }

1.给图片添加一个点击事件(imgYu)

2.使用event.currentTarget.dataset.自定义属性名称   来获取data-的值 如event.currentTarget.dataset.src  (获取data-src的值)

3.之后将获取的两个值 放到wx.previewImage接口 里面即可

 效果图片如下:可以左右滑动上一张下一张

微信小程序实现图片放大预览功能

更多内容可以查看:微信小程序教程

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

Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
极简主义法编写JavaScript类
Nov 02 #Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 #Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 #Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 #Javascript
为输入框加入数字js校验代码分享
Nov 02 #Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 #Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 #Javascript
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
存储过程和函数的区别
2013/05/28 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
皮肤科医师岗位职责
2013/12/04 职场文书
青年文明号事迹材料
2014/01/18 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
初三语文教学计划
2015/01/22 职场文书
初中班干部工作总结
2015/08/10 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技